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』。
原文地址:https://www.cnblogs.com/kingwu/p/10066524.html