受控組件

在HTML中，標簽<input>、<textarea>、<select>的值的改變通常是根據用戶輸入進行更新。在React中，可變狀態通常保存在組件的狀態屬性中，并且只能使用?setState()?更新，而呈現表單的React組件也控制著在后續用戶輸入時該表單中發生的情況，以這種由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開始是空字符串''。

• 當鍵入a，并handleNameChange獲取a和調用setState。然后，該輸入被重新呈現為具有的值a。

• 當鍵入b，handleNameChange獲取ab并設置該狀態的值。現在再次重新渲染輸入value="ab"。
  

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

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

"受控"執行情況

元素	屬性	方法	方法回調中的新值
<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

?

?

?

?

?

?

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

?

不受控組件

表單數據由DOM本身處理。即不受setState()的控制，與傳統的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> );} }

?

結論

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

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

?

?

?

?

?

?

?

參考文章地址：

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

轉載于:https://www.cnblogs.com/aichenxy/p/6758004.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。