react的双向数据绑定需要自己来实现,不像vue那样可以直接使用v-model指令。
react的表单元素可分约束性和非约束性两种。
非约束性组件
不受到react的约束,value的值有原生DOM管理,value要写成defaultValue。
<input type="text" defaultValue="123"/>
约束性组件
value的值受到react的状态state的管理,通过onchange事件来改变value值。
<input type="text" value={this.state.value} {(event)=>this.handleChange(event)/>
完整demo
window.onload = function(){
class Welcome extends React.Component{
constructor(props){
super(props);
this.state = {
value:'input',
sex:'man',
select:""
}
}
handleChange(e){
this.setState({
value:e.target.value
})
}
handleRedio(event){
this.setState({
sex:event.target.value
})
}
handleSelect(event){
this.setState({
select:event.target.value
})
}
submit(){
alert(JSON.stringify(this.state))
}
render(){
let arr = ['aaa','bbb','ccc','ddd']
return (
<div>
<input type="text" defaultValue='123456'/> <br/>
<input type="text" value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
<h1>{this.state.value}</h1>
<input type="radio" defaultChecked />
<input type="radio" name="sex" checked={this.state.sex=='man'} value='man' onChange={(event)=>this.handleRedio(event)}/>男
<input type="radio" name="sex" checked={this.state.sex=='women'} value='women' onChange={(event)=>this.handleRedio(event)}/> 女
{this.state.sex}<br/>
<select value={this.state.select} onChange={(event)=>this.handleSelect(event)}>
{
arr.map(function (item,index) {
return <option key={index} value={item}>{item}</option>
})
}
</select>
{this.state.select}
<br/>
<button onClick={()=>this.submit()}>提交</button>
</div>
);
}
}
ReactDOM.render(
<Welcome></Welcome>
,
document.getElementById('my')
)
}