Uncontrolled Components

在大多数情况下,我们建议使用可控的组件实现表单。在可控的组件中,表单的数据通过React组件进行处理。当然还有一种替代解决方案是不可控的组件,在不可控组件中,表单数据由DOM本身去处理

如果是编写不可控的组件,就不需要为每个state的更新编写一个事件处理函数,可以通过ref获取DOM中的表单的值

例如,下面代码在不可控的组件中只有一个name的值:

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

  handleSubmit(event) {
    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>
    );
  }
}

Try it on CodePan

由于不可控组件中保留了数据在DOM中的真实来源,所以看起来在某些时候,不可控的组件更容易集成React和非React的代码。如果你想要快速但是dirty的话,这种方式也能够减少一些代码。通常,还是应当使用受控的组件。

如果不清楚为某种情况使用哪种类型(可控或不可控)的组件,可以在这篇关于可控核不可控组件的建议中寻找帮助。

默认值

在React的渲染周期中,from上的value属性会覆盖DOM中的value。如果使用不可控组件,经常需要通过React指定一个初始值,但后续更新的时候不受控制。在这种情况下,你可以通过defaultValue而不是value来实现。

译者注:如果指定的是value属性,之后是无法编辑输入框更改内容的,且value的更新会导致输入框内容同样更新,而使用defaultValue没有这种副作用。

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

同样,<input type="checkbox"> and <input type="radio">支持defaultChecked,而<select><textarea>支持defaultValue.


在 Github 共同编辑

Github系列文章