React文档表单

Posted 2020-08-31

html元素和 React里的其他DOM元素有些不同，因为它们会保留一些内部的状态。举个例子，这个普通的表单接受一个name值：

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

这个表单具有默认的表单行为，当用户提交表单就会跳转到新页面。如果你想要在React里实现此行为，它自然而然就会实现。但是在大多数情况下，定义一个控制表单提交并且有能力控制用户输入的表单数据的js函数会更方便。实现这个的标准方法是一种叫“控制组件”的技术。

控制组件

在HTML里，<input>，<textarea>和<select>这类元素通常包含它们自己的状态并且会基于用户输入而更新状态。在React中，易变的状态通常会保存在组件的state属性里，并且只能使用setState()来更新。

我们可以联合两种状态通过设置React state为“单一数据源”。然后React组件会渲染表单也会控制随后用户的输入。这样子的表单元素输入的值被React控制的方法叫做“控制组件”。

举个例子，如果我们想要让上一个例子当提交的时候记录name值，我们可以把表单写成一个控制组件：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ‘‘};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(‘A name was submitted: ‘ + this.state.value);
    event.preventDefault();
  }

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

在CodePen里试一试。

只要value属性被设置在表单元素上，被显示的value值就永远会是this.state.value，使得React的state是单一数据源。当每次修改表单值的时候handleChange就会更新React的state，只要输入改变显示的值就会更新。

通过控制组件，每一个state的变化都会有一个联合的处理函数。这让它可以明确的修改或者确认用户输入。举个例子，如果我们想要强制name值都用大写字母来写，那么我们应该像这样写handleChange函数：

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}