React中input框設置value報錯解析

　　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

　　正式由於這樣，強烈推薦使用約束性組件，由於它能更好的控制組件的生命流程。