h5 input
文本: <input type="text" name="username" value="账号" /><br />
密码: <input type="password" name="password" /><br />
邮箱: <input type="email" name="email" /><br />
搜索: <input type="search" name="search" /><br />
URL: <input type="url" name="url" /><br />
年月日: <input type="date" name="date" value="2016-06-13" /><br />
年月: <input type="month" name="month" value="2016-06" /><br />
星期: <input type="week" name="week" value="2016-W23" /><br />
时间: <input type="time" name="time" value="15:00" /><br />
datetime-local:<input type="datetime-local" name="local" value="2016-06-18 15:02" /><br />
数字: <input type="number" name="number" /><br />
color: <input type="color" name="color" /><br />
range滑块:<input type="range" value="100" />
react ref
//当我们在DOM Element中使用ref时,回调函数将接收当前的DOM元素作为参数
class Input extends React.Component {
constructor(props){
super(props);
}
componentDidMount(){
this.textInput.focus(); // 自动获取焦点
}
render(){
return (
<div>
{this.props.name} <input ref={(value)=>{this.textInput =value}} type={this.props.type}></input>
</div>
)
}
}
class Form extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<div>
<Input name ={"username"} type={"text"}/>
<Input name ={"password"} type={"password"}/>
<Input name ={"email"} type={"email"}/>
<Input name ={"search"} type={"search"}/>
<Input name ={"url"} type={"url"}/>
<Input name ={"date"} type={"date"}/>
<Input name ={"month"} type={"month"}/>
<Input name ={"week"} type={"week"}/>
<Input name ={"time"} type={"time"}/>
<Input name ={"datetime-local"} type={"datetime-local"}/>
<Input name ={"number"} type={"number"}/>
<Input name ={"color"} type={"color"}/>
<Input name ={"range"} type={"range"}/>
</div>
)
}
}