在HTML當中，像
<input>,<textarea>, 和<select>這類表單元素會維持自身狀態，並根據用戶輸入進行更新。但在React中，可變的狀態通常保存在組件的狀態屬性中，並且只能用 setState() 方法進行更新。
非受控組件
非受控組件，即組件的狀態不受React控制的組件，例如下邊這個
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Demo1 extends Component { render() { return ( <input /> ) } } ReactDOM.render(<Demo1/>, document.getElementById('content'))在這個最簡單的輸入框組件里,我們並沒有干涉input中的value展示,即用戶輸入的內容都會展示在上面。如果我們通過props給組件設置一個初始默認值,defaultValue屬性是React內部實現的一個屬性,目的類似於input的placeholder屬性。
ps: 此處如果使用value代替defaultValue,會發現輸入框的值無法改變。
受控組件
同樣的，受控組件就是組件的狀態受React控制。上面提到過，既然通過設置input的value屬性, 無法改變輸入框值,那么我們把它和state結合在一起,再綁定onChange事件,實時更新value值就行了。
class Demo1 extends Component { constructor(props) { super(props); this.state = { value: props.value } } handleChange(e) { this.setState({ value: e.target.value }) } render() { return ( <input value={this.state.value} onChange={e => this.handleChange(e)}/> ) } }這就是最簡單的受控組件模型, 我們可以通過在onChange的回調里控制input要顯示的值,例如我們設置input框只能輸入數字
this.setState({ value: e.target.value.replace(/\D/g, '') })現在我們應該完全明白form表單中受控組件和非受控組件的關系。受控組件采取的理念類似於redux的單項數據流理念,即value值是在調用者上更新的。