React受控与非受控组件
受控组件
表单项的元素 input/textarea/select 等 需要维护自己的state，并根据用户输入进行更新。 可变状态通常保存在组件的state中，只能通过setState()进行更新。
React的state成为组件的“唯一数据源”、渲染表单的React组件控制着用户的输入过程中表单发生的操作。 被React以这种方式控制取值的表单输入元素就叫做“受控组件”。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('提交的名字: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
名字:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="提交" />
</form>
);
}
}如果没有给表单项加入 onchange，就不能输入数据，输入框中的内容就不会变化 输入的值时钟收React的state驱动。
<input type=“file” />因为value是只读的，因此它一定是一个非受控组件
非受控组件
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}非受控组件表单的数据直接由DOM节点来处理，和传统的表单输入标签类似。 和传统标签不同的是，若想取得表单的数据值，需要给表单添加一个ref属性，然后通过ref来获取表单项的value值。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
