React input表單雙向數據綁定仿Vue v-model實現

用過Vue的同窗都知道，Vue裏<input> 、 <textarea> 及 <select>等表單元素能夠經過v-model指令實現雙向數據綁定，也就是說，當用戶經過交互改變表單的值時，表單綁定的數據也會同步響應，這一點也是Vue對開發人員很是友好的點之一。

然而當咱們初學React的時候，就會發現React並不提供數據雙向綁定功能。也就是說，以<input>爲例，咱們能夠經過setState命令改變input綁定的數據，從而改變input的值，可是用戶填寫input表單並不能改變input綁定的數據。

可是其實在Vue中，input等表單元素的雙向數據綁定也不是Vue框架本有的功能，v-model雙向數據綁定說到底其實不過是Vue爲咱們提供的語法糖。也就是說，v-model實際上是合併了v-bind:value和v-on:input兩條指令，把數據綁定和用戶輸入事件集成到了一塊兒。

根據這個原理，咱們也能夠爲React來添加input的雙向數據綁定功能。

1，在constructor裏設置input綁定數據對象msg的初始值

constructor(props) {
    super(props);
    this.state = {
      msg: 'hello'
    }
  }

2，給input表單元素綁定數據對象msg，下面一個<p>標籤裏也綁定數據對象msg，以監測顯示數據的變化

<input value={this.state.msg} />
   <p>{this.state.msg}</p>

3，給input表單添加輸入事件監聽動做，在用戶輸入的時候同步綁定數據

<input value={this.state.msg} onChange={e => this.setState({msg:e.target.value})} />

至此，咱們在React裏也爲input表單實現了相似Vue的v-model指令功能，其餘表單對象能夠仿照實現。