React高级指南(四)【Uncontrolled Components】
在大多数情况下,我们推荐使用受控组件来实现表单。在受控组件中,表单数据由React组件处理。另外一个可选项是不受控组件,其表单数据由DOM元素本身处理。 不同于对每次状态处理都需要编写事件处理函数程序,在不受控组件中,你可以使用ref从DOM获得表单数据。 例如,在不受控组件中,以下代码可以输入名字: class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
可以尝试在CodePen中打开 因为不受控组件的数据来源是DOM元素,使用不受控组件时很容易实现React代码与非React代码的集成。如果你能希望的是快速开发,但不要求代码质量,不受控组件可以一定程度上减少代码量。否则。你应该使用受控组件。 如果你对在特定的场景下你需要使用哪种组件感到疑惑的话,this article on controlled versus uncontrolled inputs这篇文章会对你有所帮助。 默认值在React渲染的生命周期中,表单元素的value值将会覆盖DOM中的value值。在不受控组件中,你可能希望React有初始值,但随后不控制更新。在这种情况下,你需要使用 render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input defaultValue="Bob" type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
同样, (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |