React 的很大一部分是這樣的想法，即組件負責控制和管理自己的狀態。React 的很大一部分是這樣的想法，即組件負責控制和管理自己的狀態。

　　當我們將 native HTML 表單元素（ input, select, textarea 等）投入到組合中時會發生什麽？我們是否應該使用 React 作為“單一的真理來源”，就像我們習慣使用React一樣？ 或者我們是否允許表單數據存在 DOM 中，就像我們習慣使用HTML表單元素一樣？ 這兩個問題是受控（controlled） VS 不受控制（uncontrolled）組件的核心。

　受控組件是React控制的組件，也是表單數據的唯一真理來源。

　　如下所示，username 不存在於 DOM 中，而是以我們的組件狀態存在。每當我們想要更新 username 時，我們就像以前一樣調用setState。

　　class ControlledForm extends Component {

　　 state = {

　　 username: ‘‘

　　 }

　　updateUsername = (e) => {

　　 this.setState({

　　 username: e.target.value,

　　 })

　　 }

　　handleSubmit = () => {}

　　 render () {

　　 return (

　　 <form onSubmit={this.handleSubmit}>

　　 <input

　　 type=‘text‘

　　 value={this.state.username}

　　 onChange={this.updateUsername} />

　　 <button type=‘submit‘>Submit</button>

　　 </form>

　　 )

　　 }

　　}

　不受控制組件

　　我們使用 refs 來完成這個。

　　class UnControlledForm extends Component {

　　 handleSubmit = () => {

　　console.log("Input Value: ", this.input.value)

　　 }

　　 render () {

　　 return (

　　 <form onSubmit={this.handleSubmit}>

　　 <input

　　 type=‘text‘

　　 ref={(input) => this.input = input} />

　　 <button type=‘submit‘>Submit</button>

　　 </form>

　　 )

　　 }

　　}

　　雖然不受控制的組件通常更容易實現，因為您只需使用引用從DOM獲取值，但是通常建議您通過不受控制的組件來支持受控組件。

　　主要原因是受控組件支持即時字段驗證，允許您有條件地禁用/啟用按鈕，強制輸入格式，並且更多的是 『the React way』。

受控組件( controlled component )與不受控制的組件( uncontrolled component )區別