React 中受控组建与不受控组件选择

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反馈方面很简单，娜美不受控制完全没有问题 你不必听文章所说的“不好”

参考翻译
这里写链接内容