React-資料雙向繫結
阿新 • • 發佈:2018-12-17
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區分。