受控元件( controlled component )與不受控制的元件( uncontrolled component )區別
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>
)
}
}
不受控制組件( uncontrolled component )是您的表單資料由 DOM 處理，而不是您的 React 元件。
我們使用 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』。