React中input框設定value報錯解析

react input 不設定onchange的常見錯誤截圖

表單是前端非常重要的一塊內容，並且往往包含了錯誤校驗等邏輯。

react對表單元素做了專門的優化處理，他對表單元素做了一些抽象，使得他們的使用方式更統一更規範。

表單裡面出來了乙個新的概念叫「約束性元件」。那麼如何理解約束性元件和非約束性元件呢。

約束性元件，簡單的說，就是由react管理了它的value，而非約束性元件的value就是原生的dom管理的。

他們的寫法上也有很大區別。

非約束性元件這麼寫：

"
text
" defaultvalue="
a" />

這個defaultvalue其實就是原生dom中的value屬性。這樣寫出的來的元件，其value值就是使用者輸入的內容，react完全不管理輸入的過程。

而約束性元件是這麼寫的：

"
text
" value= onchange= />
//...省略部分**
handlechange: function(e) );
}

這裡，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

正式因為這樣，強烈推薦使用約束性元件，因為它能更好的控制項的生命流程。