React 非受控组件

原创

随风溜达的向日葵

发布于 2018-08-06 02:36:36

54100

代码可运行

文章被收录于专栏：技术墨客技术墨客

运行总次数：0

代码可运行

非受控组件（Uncontrolled Components）

使用非受控组件

在大部分情况下，推荐使用受控组件来实现表单、输入框等状态控制。在受控组件中，表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件，表单的数据有Dom自己控制。

非受控组件实现的重点是用Refs特性获取真实Dom来代替每次数据变更去更新组件的状态值。

例如下面的代码，在非受控组件中记录被用户输入的名字：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    //在提交时，直接使用ref获取的真实Dom获取值
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

尝试代码。

由于在非受控组件中使用Refs特性获取了真实Dom的实例，所以在使用非受控组建时，更容易集成React和非React代码，在某些时候也可以省略一些代码。但是建议除了特殊情况，都使用受控组件。

如果想要深入理解什么情况下使用哪种组件，建议阅读受控和不受控表单输入一文。

组件默认值

在React渲染的生命周期，表单中的value属性会被覆盖Dom中的value值。在使用非受控组件时，通常需要React设定一个默认初始值但是不再控制后续更新。基于这个案例，你可以指定一个defaultValue 属性来代替 value。

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}