React-数据双向绑定
1.react中数据的双向绑定没有vue中那么方便,需要自己写。方法如下:
组件中的构造函数
constructor(){
super();
this.state={
msg:'Hellow World',
num:1,
}
};
组件中的方法
changeMsg2(e){
this.setState({
msg:e.target.value
})
};
渲染
render(){
return(
<div>
<input type='text' value={this.state.msg} onChange={(e)=>{this.changeMsg2(e)}}/>
<p>{this.state.msg}</p>
</div>
)
}
需要注意的是 onChange事件是必须的,不写将会报错。
这里与Vue中不同的是react中表单的value属性不能单向绑定,否则会报错。
而且表单输入框也会无法输入值。(成为只读onlyRead)
2.当有多个表单控件需要数据双向绑定时,且需要获取它们的value:这里提供一种优化的方法
class MyLast extends React.Component {
constructor(){
super();
this.state={
name:'',
pwd:'',
address:''
}
}
change(e){
let name=e.target.name;
this.setState({
[name]:e.target.value
})
}
send(){
alert(JSON.stringify(this.state));
}
render(){
return (
<div>
<label>userName</label>
<input type='text' name='name' value={this.state.name} onChange={(e)=>{this.change(e);}} />
<p>{this.state.name}</p>
<label>password</label>
<input type='password' name='pwd' value={this.state.pwd} onChange={(e)=>{this.change(e);}} />
<p>{this.state.pwd}</p>
<label>address</label>
<input type='text' name='address' value={this.state.address} onChange={(e)=>{this.change(e);}} />
<p>{this.state.address}</p>
<button onClick={()=>{this.send();}}>submit</button>
</div>
)
}
}
为表单控件添加自定义属性name,再通过e.target.name区分。