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

1、前題
React並不提供數據雙向綁定功能。以爲例，我們可以通過setState命令改變input綁定的數據，從而改變input的值，但是用戶填寫input表單並不能改變input綁定的數據。
但是其實在Vue中，input等表單元素的雙向數據綁定也不是Vue框架本有的功能，v-model雙向數據綁定說到底其實不過是Vue爲我們提供的語法糖。也就是說，v-model其實是合併了v-bind:value和v-on:input兩條指令，把數據綁定和用戶輸入事件集成到了一起。

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

2、來實現

this.state={            
userName:'',//用戶名            
password:'',//密碼
 }  

主代碼不能複製哦 但是可以參考 主要看重點勾選的

禁止轉載，謝謝