React 中受控组建与不受控组件选择不必纠结
标题
你一定看过很多文章说不应该使用 setState 但是官方文档却说 ref 不是最好的解决方案 这如此的矛盾 让我们很难去选择正确的用法,甚至连选择的标准都很难弄清楚。
哪我们应该如何去设计表单呢?
毕竟表单是许多的网络应用程序的的核心,然而react中对表单的处理看起来像是他的基石。
没有关系 让我来介绍两种方法之间的不同之处,并且介绍什么情况应该使用哪种方法。
不受控制的组件
不受控制的组件就像是传统的html表单输入
class Form extends Component {
render() {
return (
<div>
<input type="text" />
</div>
);
}
}
组件会存储你的输入内容 然后你可以使用ref获得这个值。例如在onClick按钮的处理程序中:
class Form extends Component {
handleSubmitClick = () => {
const name = this._name.value;
// do something with `name`
}
render() {
return (
<div>
<input type="text" ref={input => this._name = input} />
<button onClick={this.handleSubmitClick}>Sign up</button>
</div>
);
}
}
换句话说 你必须在你需要的时候从输入框中取得这个值,一般是当你提交表单的时候。
这是实现表单输入最简单的方法,当然在现实中一些简单的案例和学习react 时确实有效。
然而他没有那么强大 所以我们来看看那些受控制的组件
受控组件
一个受控组件接受当前的值作为prop,当回调函数调用修改这个值,你可以说这是更接近react 的思想但是不意味着你总是要用它
<input value={someValue} onChange={handleChange} />
一切都可以但是input的值必须储存在state中,组件会渲染input保存状态
class Form extends Component {
constructor() {
super();
this.state = {
name: '',
};
}
handleNameChange = (event) => {
this.setState({ name: event.target.value });
};
render() {
return (
<div>
<input
type="text"
value={this.state.name}
onChange={this.handleNameChange}
/>
</div>
);
}
}
(当然,它也可以存储在其他组件的state中或者甚至存储在 中间件中像redux)
每当你输入一个新的字符时 handleNameChange都会被调用, 他将接受新的值并修改state
- 他最初始化是一个空的字符串
- 您输入a 并被handleNameChange获取a 调用setState 重新渲染输入的值a
- 您输入b 并被handleNameChange获取b 调用setState 重新渲染输入的值a
这种将数据推送修改表单组件的流。所以表单组件一直都能获得当前的input的值而不需要去请求。
这意味着数据和ui是同步的,状态将值提供给input,input从表单获取的当前的值。
同时也意味着表单组件可以立即响应输入的值例如:
- 就地反应 例如验证
- 除非所有字段都有效 否则禁用按钮
- 强制一些特殊的格式 例如信用卡号
但是如果你不需要这些而且不受控更简单 那就用吧
什么使元素受控
当然还有其他形式元素。你有checkbox和radio和selects和textareas
如果通过prop设置其值,则表单元素将变为“受控”
但是,每个表单元素都有一个不同的prop用于设置该值,所以这里有一个小表来总结
结论
两种方法都有自己的优点 对你有用的方法就是好方法
如果您的ui反馈方面很简单,娜美不受控制完全没有问题 你不必听文章所说的“不好”
参考翻译
这里写链接内容