React Form表单
state数据
this.state = {
msg:"react表单",
name:'',
sex:'1',
city:'',
citys:[
'北京','上海','深圳'
],
hobby:[
{
'title':"睡觉",
'checked':true
},
{
'title':"吃饭",
'checked':false
},
{
'title':"敲代码",
'checked':true
}
],
info:''
};
文本输入框(text)
<input type="text" value={this.state.name} onChange={this.handelName}/>
handelName=(e)=>{
this.setState({
name:e.target.value
})
}
单选框(radio)
性别:
<input type="radio" value="1" checked={this.state.sex==1} onChange={this.handelSex}/>男
<input type="radio" value="2" checked={this.state.sex==2} onChange={this.handelSex}/>女
handelSex=(e)=>{
this.setState({
sex:e.target.value
})
}
下拉框(select)
居住城市:
<select value={this.state.city} onChange={this.handelCity}>
{
this.state.citys.map(function(value,key){
return <option key={key}>{value}</option>
})
}
</select>
handelCity=(e)=>{
this.setState({
city:e.target.value
})
}
多选(checkbox)
爱好:
{
// 注意this指向
this.state.hobby.map((value,key)=>{
return (
<span key={key}>
<input type="checkbox" checked={value.checked} onChange={this.handelHobby.bind(this,key)}/> {value.title}
</span>
)
})
}
handelHobby=(key)=>{
var hobby=this.state.hobby;
hobby[key].checked=!hobby[key].checked;
this.setState({
hobby:hobby
})
}
多行文本框 (textarea)
备注:<textarea vlaue={this.state.info} onChange={this.handleInfo} />
this.handleInfo=this.handleInfo.bind(this);
handleInfo(e){
this.setState({
info:e.target.value
})
}
表单提交(submit)
<form onSubmit={this.handelSubmit}>
<input type="submit" defaultValue="提交"/>
</form>
handelSubmit=(e)=>{
//阻止submit的提交事件
e.preventDefault();
//输出表单数据
console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby,this.state.info);
}
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付
