【react】关于表单的受控组件与非受控组件

处理表单输入有两种方式：受控组件和非受控组件

1.受控组件是什么？

input表单元素值是由React控制的。表单数据是由React组件来管理。
简单理解就是带有onchange函数用setstate更新数据的 就是非受控组件（个人理解）
例子:

  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>
    );
  }
}

2.非受控组件是什么？

运行在React体系之外的表单元素，表单数据是由Dom节点来控制。
简单理解就是需要用到ref来获取DOM元素的
例子：

  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>
    );
  }
}

3.哪些特殊场景下应该使用哪种组件？

官网推荐使用：受控组件

但是的确使用非受控组件会更容易将真实的数据存储到Dom中，同时集成React和非React代码，减少工作量，快速编写。

下面列出特殊场景下，应使用哪种组件 ：参考文章