受控组件( controlled component )与不受控制的组件( uncontrolled component )区别
Posted kingwu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了受控组件( 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』。
以上是关于受控组件( controlled component )与不受控制的组件( uncontrolled component )区别的主要内容，如果未能解决你的问题，请参考以下文章