import React,{Component} from 'react';
/**
* 约束性和非约束性组件
* 非约束性组: <input type='text' defaultValue={this.state.username}/>这个defaultValue其实就是原生DoM中的value属性
* 这样写出来的组件,其value值就是用户输入的内容,React完全不管输入的过程
* 约束性组件: <input type='text' value={this.state.username} onChange={this.handleUsername}/>
* 这里,value属性不再是一个写死的值,他是this.state.username,this.state.username是由this.handleChange负责管理的
* 这个时候实际上input的value根本不是用户输入的内容。而是onChange时间触发之后,由于this.setState导致了一次重新渲染。不过React会优化这个
*/
class ReactForm extends Component{
constructor(props){
super(props);
//react可以在这里定义数据
this.state={
//这里面写一个对象
msg:'react表单',
name:'',
sex:'1',
city:'',
citys:[
'北京','上海','深圳'
],
hobby:[
{
'title':"睡觉",
'checked':true
},
{
'title':"吃法",
'checked':false
},
{
'title':"敲代码",
'checked':true
},
],
info:''
}
}
handelSubmit=(e)=>{
//阻止submit的提交事件
e.preventDefault();
console.log(this.state.name,this.state.sex,this.state.citys,this.state.hobby,this.state.info)
}
handelName=(e)=>{
this.setState({
name:e.target.value
})
}
handelSex=(e)=>{
this.setState({
sex:e.target.value
})
}
handelCity=(e)=>{
this.setState({
city:e.target.value
})
}
handelHobby(key){
var hobby=this.state.hobby;
hobby[key].checked=!hobby[key].checked;
this.setState({
hobby:hobby
})
}
handelInfo=(e)=>{
this.setState({
info:e.target.value
})
}
render(){
return (
<div>
{this.state.msg}
<form onSubmit={this.handelSubmit}>
用户名: <input type="text" value={this.state.name} onChange={this.handelName}></input><br/>
性别: <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handelSex}/>男<br/>
<input type="radio" value="2" checked={this.state.sex==2} onChange={this.handelSex}/>女<br/>
居住城市: <select value={this.state.city} onChange={this.handelCity}>
{
this.state.citys.map(function(value,key){
return <option key={key}>{value}</option>
})
}
</select>
爱好:
{
this.state.hobby.map((value,key)=>{
return (
<div key={key}>
{value.title}<input type="checkbox" checked={value.checked} onChange={this.handelHobby.bind(this,key)}/>
</div>
)
})
}
<br/>
备注: <textarea value={this.state.info} onChange={this.handelInfo}/>
<input type="submit" value="提交"></input>
</form>
</div>
)
}
}
export default ReactForm;
注意多选框和radio的函数写法