受控組件與不受控制的組件有什么區別？

React的很大一部分是將組件控制和管理自己的狀態的想法。

當我們將本機HTML表單元素（輸入，選擇，文本區域等）投入到組合中時會發生什么？我們是否應該使用React作為“單一的真理來源”，就像我們習慣使用React一樣，或者我們是否允許表單數據生活在DOM中，就像我們習慣於使用HTML表單元素一樣？這兩個問題是控制和不受控制組件的核心。

甲控制組分為其中陣營處於組分控制和是真理的表單數據的單一來源。

如下所示，用戶名不存在於DOM中，而是以我們的組件狀態存在。每當我們想要更新用戶名時，我們就像以前一樣調用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>
    )
  }
}

 

一種不受控制的組分為其中表單數據由DOM處理，而不是你陣營組件內部。

你可以使用參考來完成這個。

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獲取值，通常建議您通過不受控制的組件來支持受控組件。主要原因是受控組件支持即時字段驗證，允許您有條件地禁用/啟用按鈕，強制輸入格式，並且更多的是“React方式”。