Skip to content

Latest commit

 

History

History
258 lines (204 loc) · 8.03 KB

【译】快速起步-表单.md

File metadata and controls

258 lines (204 loc) · 8.03 KB
Raw
title date version
快速起步-表单
2017-04-28 01:35:09 -0700
15.5.0

表单

HTML的表单元素和React中的表单元素有所不同，因为表单元素会保持一些内部状态。例如，以下是一个接收单个name的纯HTML表单：

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

当用户提交表单时，该表单具有打开新页面的默认行为。这种用法放在React中也是可用的。但是，大多数时候，我们希望使用JavaScript函数处理表单提交并能方便的访问用户输入的表单数据。实现这一点的标准方式是使用一种称之为受控组件（controlled components）的技术。

受控组件

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

Try it on CodePen.

自从我们如上设置了表单元素的 value 属性，显示的value将总是 this.state.value, React的state是唯一数据源。handleChange 将在每次敲键盘之后执行，用于更新React的 state，并将显示值更新为用户输入。

使用受控组件，每个状态的变化都具有相关的处理函数。这使得可以直接修改或者验证用户的输入。例如，如果我们要强制name属性全大写，我们可以如下编写 handleChange，如下：

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

TextArea标签

在HTML中，<textarea> 标签使用它的子集来定义它显示的文本：

<textarea>
  Hello there, this is some text in a text area
</textarea>

在React中，<textarea> 使用 value 来替代。这样，使用 <textarea> 就非常类似于用于单行输入的表单：

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

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

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

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

注意，this.state.value 需要在构造函数中初始化，以便设置 textarea 的初始值。

Select标签

在HTML中, <select> 创建了一个下拉列表。例如，下面的HTML创建了一个关于味道的下拉列表：

<select>
  <option value="grapefruit">葡萄柚味</option>
  <option value="lime">柠檬味</option>
  <option selected value="coconut">椰子味</option>
  <option value="mango">芒果味</option>
</select>

注意，<select> 初始选中了椰子味，是因为 <option> 上的 seleceted 属性。在React中，在根 select 标签上用 value 属性替代了 select 属性。这样在受控组件中更方便，因为您只需要更新一个位置。例如：

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

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

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

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Try it on CodePen.

总的来说，<input type="text">, <textarea>, 和 <select> 都能很简单的运行，它们都接受一个 value 属性，所以您能使用它来实现受控组件。

处理多个输入

当你需要处理多个受控的 input 元素，你可以添加一个 name 属性当这些元素上，并可以在处理函数中，通过 event.target.name 来决定执行什么。

例如：

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Try it on CodePen.

注意，如何使用ES6 computed property name 语法来更新动态的name属性：

this.setState({
  [name]: value
});

它等价于如下的ES5代码：

var partialState = {};
partialState[name] = value;
this.setState(partialState);

由于 setState() 会自动 合并状态到当前状态，我们仅需要传入有变化的部分。

受控组件的替代方案

使用受控组件有时可能很繁琐，因为您需要为每个可以变化的数据编写一个事件处理程序，并通过一个React组件管理所有的输入状态。当您将预先存在的代码转换为React，或者将React与非React程序集成时，这可能会变得特别麻烦。在这种情况下，你可能需要尝试 不受控组件，一种实现输入表单的替代技术。