react 表單（受控元件和非受控元件）

我們知道表單元素與其他的普通dom元素來說是不一樣的，它們儲存了自己的一些狀態。

我們主要說的就是表單元素中的受控元件和非受控元件。

受控元件就是這個元件的狀態是我們（react）控制的，這個元件的行為是完全受到我們控制的，所以叫做受控元件，比如：

1
class
nameform extends react.component ;56
this.handlechange = this.handlechange.bind(this);7
this.handlesubmit = this.handlesubmit.bind(this);8
}910   handlechange(event
) );12}
1314   handlesubmit(event
) 18
19render() 
30 }

這個表單中的input的value是受到元件的state來控制的，並且元素的onchange也是受到元件的控制函式控制的，並且最終表單的提交也是收到元件的提交處理函式控制的。也就是說，元件任何狀態的改變，都是收到乙個相關的處理函式控制的。那麼我們想想這種受控元件有什麼優點和缺點，我們稍微想一下就是受控元件的話，優點就是一切都是可以控制的，缺點很明顯，就是寫起來比較麻煩，不過這也不算是缺點吧，畢竟要功能強大，肯定就需要自己定製呀。

非受控元件

在大多數情況下，我們推薦使用受控元件來實現表單。在受控元件中，表單資料由 react 元件處理。如果讓表單資料由 dom 處理時，替代方案為使用非受控元件。

這句話大概說明了什麼是非受控元件。我們看乙個例子：

1
class
nameform extends react.component 
67   handlesubmit(event
) 11
12render() 
23 }

我們可以跟上面的受控元件做乙個下比較，首先直觀上看，我們的**量少了一點，那麼具體**少了呢，就是我們不需要對input的onchange事件進行函式處理，我們也沒有儲存input的value的state，所以這個元件的狀態是由它自己儲存的，我們可以在需要的時候通過ref獲取到，比如在submit的時候。有時候我們需要給元件加上預設值，受控元件很容易做到，就是給state初始化的時候給乙個預設值，但是非受控元件怎麼弄呢？這裡有乙個屬性叫做defaultvalue我們給input傳入這個屬性就可以修改它的初始值了。（checkbox 和 radio 是defaultchecked）

那麼我們到底該如何選擇使用受控元件還是非受控元件呢？

我也不是特別明確，看了一些別人寫的文章，我的理解是：當我們需要實時的控制項的狀態（包括樣式，值等），我們就應該使用受控元件，如果我們只是需要在提交的時候獲取一下值什麼的，我們可以選擇使用非受控元件。

還有乙個特殊的東西，就是，這種元件只能是非受控元件，因為它的value屬性是唯讀的，只能夠受使用者控制，我們沒法主動去控制。

react 表單（受控元件和非受控元件）

React 之受控元件和非受控元件

React 受控元件和非受控元件 1 1

react受控元件與非受控元件

react 表單（受控元件和非受控元件）

React 之受控元件和非受控元件

React 受控元件和非受控元件 1 1

react受控元件與非受控元件

相關推薦