關于React中受控元件和不受控元件的選擇問題分析

前言

帶着問題看文章

非受控元件：

受控元件：

小總結

如果您是一名React開發者，您應該了解在開發React項目的過程中，如果遇到了處理表單的資料的時候一般有倆種的選擇方式，一種是選擇受控元件，一種是選擇非受控元件。那麼我們該如何正确的選擇使用它們呢？

您可能已經看過很多文章說“不應該使用setState”，而文檔又聲稱“ refs不好” ……這在馬克思主義基本原理裡面這就是沖突的展現，我們到底該如何選擇呢？

你應該怎麼做表單？

什麼時候适合用受控元件，什麼時候适合用非受控元件

接下來開始我們的文章正題：

非受控元件其實就是傳統的HTML表單

html的input元素會幫你記住你的輸入内容，然後我們就可以通過他們的ref擷取值。或者在你輸入内容的時候追加一個onChange通過event擷取值。

但是一般如果你想要使用onChange擷取值筆者就不建議使用非受控元件了。

現在我們在上面的代碼中追加一個button與一個事件處理程式：

這樣我們就可以通過擷取到input的輸入值了，我們就可以進行一些表單的送出操作之類的。

不受控元件的優點就是代碼量會小一些，使用起來也很簡單。 缺點就是很弱。。。為什麼說它很弱？請看下面的受控元件。

受控元件一般就是我們控制輸入框的value值與onChang：

上面的代碼通過給input手動設定value的方法使他受我們的控制，然後在綁定一個onChange事件，擷取event對象的.target.value的值。設定給我們的state。這樣就實作了我們的資料雙向綁定。

很多朋友就會很好奇，這樣來看的話受控元件比非受控元件麻煩多了啊，我們為什麼要用受控元件？

筆者剛剛也提了一下，代碼确實是非受控元件的代碼更少，但是它沒有受控元件強！

比如我們想要限制使用者的輸入内容，并對其進行處理顯示。

現在我們将使用者輸入的所有位置的空格去掉：

當然，将它變成受控元件的好處遠不止如此。

我們還可以将倆個或以上的input的值去進行綁定相關聯。

比如我們現在做倆個input标簽，我在一個input裡輸入會影響另外一個的值。

比如我們設定倆個input輸入框的總和值為100。

上方代碼我們不僅更改了value的顯示【比如輸入大于100的時候會把它改為100，輸入小于0的時候會改為0】。而且我們也實作了雙輸入框資料的關聯性。

受控元件強的地方： 1.可以自己控制資料。在改變資料的時候做一些我們想要進行的操作。【非受控元件也可以，就是比受控元件麻煩】 2.我們可以實時驗證資料。 3.做一些我們想要的關聯關系處理。 。。。

想要将元素變為受控元件可以給元素增加如下屬性：

其實筆者認為受控元件與非受控元件各有優處。如果你的需求很簡單，不需要什麼認證之類的話就用非受控元件即可，如果需求略微複雜還是建議使用受控元件。

當然，就算你最開始使用的是非受控元件，後面想要改成受控元件也是很簡單的。就參照受控元件内容裡最下方的那個表格加入該有的屬性和方法即可~