1.表单分受控组件和非受控组件
受控组件:我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”
非受控组件:非受控组件将真实数据储存在 DOM 节点中
2.受控组件
1.<input>、 <textarea> 和 <select>
2.使用:如何获取值以及更新值
<input name="username" value={this.state.username} onChange={this.gaibian.bind(this)}>
方法1:
gaibian(event){
this.setState({
username:event.target.value
})
}
方法2:
gaibian(event){
this.setState({
[event.target.name]:event.target.value
})
}
3.<textarea> 不管是设置值还是获取值都使用value属性
4.select
<select value={this.state.key} onChange={this.sel.bind(this)}>
sel(event){
this.setState({
key:event.target.value
})
}
5.单选按钮
<input type="radio" name='sex' value='nan' onChange={this.selsex.bind(this)}/> 男
<input type="radio" name='sex' value='nv' onChange={this.selsex.bind(this)}/> 女
selsex(event){
// console.log(event.target.value)
this.setState({
sex:event.target.value
})
}
6.多选按钮
<input type="checkbox" vaule="apple" onChange={this.friut.bind(this)}>
<input type="checkbox" vaule="orange" onChange={this.friut.bind(this)}>
<input type="checkbox" vaule="pie" onChange={this.friut.bind(this)}>
friut(event){
let cur = event.target.value;
let arr = this.state.shuiguo;
if(this.state.shuiguo.indexOf(cur) == -1 ){
arr.push(cur)
this.setState({
shuiguo:arr
})
}else{
arr.splice(this.state.shuiguo.indexOf(cur),1)
this.setState({
shuiguo:arr
})
}
}
7.form标签上
<form onSubmit={this.tijiao.bind(this)}>
<input type="submit" value="提交" />
<form>