1. 受控元件：元件處於受控制狀態，不可更改輸入框內的值。
2. 什麼情況下會讓元件變成受控元件？
- 文字框設定了value屬性的時候
- 單選框或多選框設定了checked屬性的時候。
3. 如何解決？
- 使用state設定值
- 繫結onchange事件- 在事件處理方法中獲取元件的值並更改state。
4. input框受控解決舉例：
當父級傳入1個值放到子元件的input框內時，如果採用props的方法接收，並用value屬性渲染到input框裡，
如：
此時我們會發現，input框的內容 「name」就不能修改、刪除了。
並且瀏覽器給出警告，大致意思是用prop得到的value值渲染的表單元素，是乙個唯讀的區域，不能做修改。
此時我們就要通過設定state與onchange事件並用的方式來解決受控元件的問題。
①首先，從父元件傳值的方式我們不變。
②然後，從子元件接收這個值就要用props的值來設定到state上了。
- 在子元件的constructor裡初始化1個state的value值為空字串（其實在這裡也能獲取到props的值，但是constructor只執行元件建立的第1次時執行，後續不執行，所以得不到我們後續傳過來的value值）
- 初始化後，在props改變時候觸發的componentwillreceiveprops(newprops)事件裡設定state裡的value值，其值為props傳過來的value。
- 在input框value屬性接收state裡的value值，同時繫結onchange事件，即輸入框的值改變的時候就觸發設定state狀態的值。
其中onchange事件的函式需用箭頭函式，防止this值的改變。- 完成上述設定後，就會發現input框的值可以改變啦，而且瀏覽器的警告也沒有了。
以上是input框的設定方法，select框的設定方法類似，在此不做贅述，示例**如下：
React 受控元件
複習 2019 1 22 1.受控元件 在原生的html中，input type text textarea select 三個元素的內部的屬性可以隨著使用者的輸入變化。2.react 中使用 state 控制屬性的變化，將原生的受控元件和 react 中 state 結合。class text e...
react受控元件
react受控元件大的方面 react元件分為函式式元件和類元件 表單元素而言 分為受控元件和非受控元件 非受控元件 只需要在dom元素上面通過ref進行繫結取值即可。受控元件 受到資料的控制，使得react成為唯一的資料來源.input value onchange body constructo...
react受控元件與非受控元件
在html中，標籤input textarea select的值的改變通常是根據使用者輸入進行更新。在react中，可變狀態通常儲存在元件的狀態屬性中，並且只能使用 setstate 更新，而呈現表單的react元件也控制著在後續使用者輸入時該表單中發生的情況，以這種由react控制的輸入表單元素而...