受控組件

在HTML中，標(biāo)簽<input>、<textarea>、<select>的值的改變通常是根據(jù)用戶輸入進行更新。在React中，可變狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能使用?setState()?更新，而呈現(xiàn)表單的React組件也控制著在后續(xù)用戶輸入時該表單中發(fā)生的情況，以這種由React控制的輸入表單元素而改變其值的方式，稱為：“受控組件”。

class NameForm extends React.Component {constructor(props) {super(props);this.state = {name: ''};this.handleNameChange = this.handleNameChange.bind(this);}handleNameChange(event) {this.setState({ name: event.target.value });};render() {return (<div><input type="text" value={this.state.name} onChange={this.handleNameChange}/></div> );} }

原理圖：

?

• name開始是空字符串''。

• 當(dāng)鍵入a，并handleNameChange獲取a和調(diào)用setState。然后，該輸入被重新呈現(xiàn)為具有的值a。

• 當(dāng)鍵入b，handleNameChange獲取ab并設(shè)置該狀態(tài)的值。現(xiàn)在再次重新渲染輸入value="ab"。
  

這也意味著表單組件可以立即響應(yīng)輸入更改;?例如：

• 就地反饋，如驗證
• 禁用按鈕，除非所有字段都有有效的數(shù)據(jù)
• 執(zhí)行特定的輸入格式，如信用卡號碼

"受控"執(zhí)行情況

元素	屬性	方法	方法回調(diào)中的新值
<input type="text" />	value="string"	onChange	event.target.value
<input type="checkbox" />	checked={boolean}	onChange	event.target.checked
<input type="radio" />	checked={boolean}	onChange	event.target.checked
<textarea />	value="string"	onChange	event.target.value
<select />	value="option value"	onChange	event.target.value

?

?

?

?

?

?

可見效果：當(dāng)注釋?this.setState({value: event.target.value});?這行代碼，文本框再次輸入時，頁面不會重新渲染，所產(chǎn)生效果即是文本框輸入不了值，即文本框值的改變受到?setState()?方法的控制，在未執(zhí)行時，不重新渲染組件

?

不受控組件

表單數(shù)據(jù)由DOM本身處理。即不受setState()的控制，與傳統(tǒng)的HTML表單輸入相似，input輸入值即顯示最新值（使用 ref?從DOM獲取表單值）

class NameForm extends React.Component {constructor(props) {super(props);this.handleSubmit = this.handleSubmit.bind(this);}handleSubmit(event) {alert('A name was submitted: ' + this.input.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:<input type="text" ref={(input) => this.input = input} /></label><input type="submit" value="Submit" /></form> );} }

?

結(jié)論

受控和不受控元素都有其優(yōu)點，根據(jù)具體情況選擇。如果表單在UI反饋方面非常簡單，則對ref進行控制是完全正確的，即使用不受控組件。

特征	不受控制	受控
一次性檢索（例如表單提交）	yes	yes
及時驗證	no	yes
有條件的禁用提交按鈕	no	yes
執(zhí)行輸入格式	no	yes
一個數(shù)據(jù)的幾個輸入	no	yes
動態(tài)輸入	no	yes

?

?

?

?

?

?

?

參考文章地址：

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

轉(zhuǎn)載于:https://www.cnblogs.com/aichenxy/p/6758004.html

總結(jié)

以上是生活随笔為你收集整理的受控组件和不受控组件的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。