react input 不設置onChange的常見錯誤截圖
表單是前端非常重要的一塊內容，並且往往包含了錯誤校驗等邏輯。
React對表單元素做了專門的優化處理，他對表單元素做了一些抽象，使得他們的使用方式更統一更規范。
約束性和非約束性組件
表單里面出來了一個新的概念叫“約束性組件”。那么如何理解約束性組件和非約束性組件呢。
約束性組件，簡單的說，就是由react管理了它的value，而非約束性組件的value就是原生的DOM管理的。
他們的寫法上也有很大區別。
非約束性組件這么寫：
<input type="text" defaultValue="a" />
這個 defaultValue 其實就是原生DOM中的 value 屬性。這樣寫出的來的組件，其value值就是用戶輸入的內容，React完全不管理輸入的過程。
而約束性組件是這么寫的：
<input type="text" value={this.state.name} onChange={this.handleChange} /> //...省略部分代碼 handleChange: function(e) { this.setState({name: e.target.value}); }
這里，value屬性不再是一個寫死的值，他是 this.state.name，而 this.state.name 是由 this.handleChange 負責管理的。
這個時候實際上 input 的 value 根本不是用戶輸入的內容。而是onChange 事件觸發之后，由於 this.setState 導致了一次重新渲染。不過React會優化這個渲染過程，實際它依然是通過設置input的value來實現的。
但是一定要注意，約束性組件顯示的值和用戶輸入的值雖然很多時候是相同的，但他們根本是兩碼事。約束性組件顯示的是 this.state.name 的值。你可以在handleChange中對用戶輸入的值做任意的處理，比如你可以做錯誤校驗。
對比約束性組件和非約束性組件的輸入流程：
非約束性組件： 用戶輸入A -> input 中顯示A
約束性組件： 用戶輸入A -> 觸發onChange事件 -> handleChange 中設置 state.name = “A” -> 渲染input使他的value變成A
正式因為這樣，強烈推薦使用約束性組件，因為它能更好的控制組件的生命流程。