React-数据双向绑定

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区分。