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