纯属搬砖，翻译自原文 Controlled and uncontrolled form inputs in React don't have to be complicated
你看你看多很多文章写道“你不应该使用
setState”，还有很多文档声称“ref不好”等，那是很矛盾的，很难去理解怎么用才是正确的甚至什么是选择的标准。我们应该怎样写一个表单呢？
毕竟表单是很多web应用的核心。然而，在react中表单处理似乎是基础？
不要再害怕了。让我给你展示这2种方法的区别，以及什么时候该使用哪个。
非受控 The Uncontrolled
非控制的input很像传统的HTML表单input
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>
);
}
}
换句话说，你必须去'拉取(pull)'这个字段的值当你需要它的时候。这可以发生在表单已经被提交的时候。
那是实现表单input的最简单的方法。当然有的时候用它会很有效：在简单的表单中，还有学习React的时候。
但他不够强大，接下来看看那些受控的input
受控的 The Controlled
一个受控制的input 接受当前的“值”作为属性，和一个回调函数去改变那个“值”，你可以说这个方法更“React”（但不意味着你必须一直用它）
<input value={someValue} onChange={handleChange} />
这个input的“值”必须保存在state里。典型的，渲染那个input的组件保存在他的state:
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，甚至是分离的state store里)
每次当你输入一个新的字符，handleNameChange就被调用。它获取input的最新值并把它更新到state。
- 开始于一个空字符串
'' - 当输入
a，handleNameChange获得a然后调用setState，然后input重新渲染得到值a - 当输入
b，handleNameChange获得ab并赋值给state，input再次重新渲染，这时value="ab"
这种‘流’有点像把值‘push’给表单组件，所以表单组件总是有input的当前value,不用明确的去请求它。
这就意味着你的数据(state)和UI(inputs)总是同步的。state 把值给input,input请求表单改变当前的值。
这也意味着表单组件可以立即的响应input的变化，比如可以用作： - 定位反馈，像表单验证
- 禁用按钮除非所有的字段都是有效的数据
- 强制转换一个特定的输入格式，像信用卡数字
但是如果你不需要以上，那么非受控的会更简单，试试吧。
什么会让一个控件“受控”
还有其他的控件，比如 checkboxes 、radios a、selects 、 textareas。
让一个元素“受控”就是通过一个属性设置它的值。
每个表单控件都有不同的属性去设置它的值，以下是汇总表格：
结论
受控和非受控表单控件都有各自的有点。评估你的具体状况选择最适合的方法
如果你的表单很简单，仅限于UI的反馈，非受控的配合refs完全可以。你不必听那些各种文章说的“不好”
网友评论