React裡受控與非受控元件

背景：

react內部分別使用了props, state來區分元件的屬性和狀態。props用來定義元件外部傳進來的屬性, 屬於那種經過外部定義之後, 元件內部就無法改變。

而state維持元件內部的狀態更新和變化, 元件渲染出來後響應使用者的一些操作,更新元件的一些狀態。如果元件內部狀態不需要更新,即沒有呼叫過this.setstate,

全部通過props來渲染也是沒問題的, 不過這種情況不常見。本文所介紹的內容就是通過props和state的定義來談談react的受控元件和非受控元件。

主體：顧名思義, 非受控元件即元件的狀態改變不受控制.接來下我們以乙個簡單input元件**來描述。

import react,  from 'react';
import reactdom from 'react-dom';
class demo1 extends component 
}reactdom.render(, document.getelementbyid('content'))

在這個最簡單的輸入框元件裡,我們並沒有干涉input中的value展示,即使用者輸入的內容都會展示在上面。如果我們通過props給元件設定乙個初始預設值,defaultvalue屬性是react內部實現的乙個屬性,目的類似於input的placeholder屬性。

ps: 此處如果使用value代替defaultvalue,會發現輸入框的值無法改變。

上面提到過,既然通過設定input的value屬性, 無法改變輸入框值,那麼我們把它和state結合在一起,再繫結onchange事件,實時更新value值就行了。

class demo1 extends component 
}handlechange(e) )
}render()  onchange=/>)}
}

這就是最簡單的受控元件模型, 我們可以通過在onchange的**裡控制input要顯示的值,例如我們設定input框只能輸入數字

this.setstate()

現在我們應該完全明白form表單中受控元件和非受控元件的關係。受控元件採取的理念類似於redux的單項資料流理念,即value值是在呼叫者上更新的。

其他參考文章：

表單是應用中不可缺少的一部分，表單不同於其他 html 元素，因為它要響應使用者的互動，並根據使用者輸入顯示不同的狀態。react 基於props和state的元件渲染機制，可以很好的處理表單的複雜性。在react 中，表單元件分為兩種：受控元件和非受控元件。

受控元件

非受控元件

受控元件與非受控元件的選擇

1.1 受react控制的值

受控元件也被稱做「受限元件」或「受約束元件」。受控元件與其它react元件行為一樣，其所有狀態屬性的更改都由react 來控制，也就是說它根據元件的props和state來改變元件的ui表現形式。

對於乙個受限元件，當我們設定其value值。元件渲染後，其value值會始終保持不變：

var myinput = react.createclass(
});reactdom.render(
,  document.getelementbyid('example')
);

上面的**渲染後是乙個值為itbilu.com的 input 元素,使用者在渲染後的元素裡中輸入任何值都不起作用，這是因為其值是受react 控制的，react已經為其賦值為itbilu.com。

1.2 表單元件事件

react控制受控元件的值保持不變，同樣其也會受元件狀態的改變，其表現形式和普通react元件一樣。而果想響應更新使用者輸入的值，可以使用react 元件事件設定狀態（state或props）。

如，我們通過元件的 onchange 事件改變input的value：

var myinput = react.createclass(;
},handlechange: function(event) );
},render: function() 
});reactdom.render(
,  document.getelementbyid('example')
);

1.3 受控元件的好處

受控元件的優勢在於，我們可以非常容易實現對使用者輸入的驗證，或者對使用者互動做額外的處理。

如，對使用者輸入做截斷處理：

handlechange: function(event) );
}

上面的**會接受使用者輸入，並擷取前 140 個字元

2.1 反模式

非受控元件相對於普通react 元件或受控元件來說是一種反模式。非受控元件不受react 的狀態控制（state或props）。

如，對於來說，當我們不設定其value或設定為null時就是乙個非受控元件。非受控的元件渲染出來的元素直接反應使用者輸入，其值會隨使用者輸入的改變而改變：

var myinput = react.createclass(
});reactdom.render(
,  document.getelementbyid('example')
);

非受控元件依然可以設定初始值。如，我們可以的defaultvalue屬性：

render: function()

2.2 非受控元件的事件

和受控元件一樣，非受控元件同樣可以使用react 元件事件。

如，我們可監聽的onchange事件：

var myinput = react.createclass();
},render: function() 
});reactdom.render(
,  document.getelementbyid('example')
);

2.3 非受控元件的引用

非受控元件一般沒什麼用途，其值並非受父元件控制，它的值受其自身控制。但是，我們可以對其新增乙個ref屬性，這樣可以獲得對非受控元件渲染後底層dom元素的訪問。

react 元件應當只受狀態的改變而改變，雖然使用受控元件在**量上有所增加，但推薦使用受控元件。受控元件的元件狀態由react 控制，可以更好的控制資料流，在使用者輸入時能夠更新元件狀態。

在前面的示例中，乙個受控元件有如下過程：

React裡受控與非受控元件

react受控元件與非受控元件

react受控元件與非受控元件

react受控元件與非受控元件

React裡受控與非受控元件

react受控元件與非受控元件

react受控元件與非受控元件

react受控元件與非受控元件

相關推薦