React 什么时候该使用受控和非受控表单控件

纯属搬砖，翻译自原文 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完全可以。你不必听那些各种文章说的“不好”

最后编辑于：2020.06.15 16:05:34