标签：tar OLE 部分 格式 字段 单元素 获取 来源 而不是
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 )区别
标签：tar OLE 部分 格式 字段 单元素 获取 来源 而不是
原文地址：https://www.cnblogs.com/kingwu/p/10066524.html
