在HTML中，一個經典表單如下：

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

在React中，表單存在于一個組件中。為了更好的控制，通知組件會將控件的賦值操作給截獲，獲取新值，然后再設置于控制。這樣可以保證表單與組件中的數值一致。

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}); // 截獲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} /> // 將state.value設置到控件
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

上面是input的處理，我們再來看一下select的處理。select也是處理value，以及截獲onChange。

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}> // 截獲onChnage
            <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>
    );
  }
}

上述兩種情況，處理的均是單一控件的情況。如果有多個控件，可以通過添加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 // 此處是關鍵，將value的key設置為target.name
    });
  }

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

React中什么是Uncontrolled Component？

好，這一節就到這里。后續我將介紹更多React技術細節，來慢慢解答上述問題。

想學計算機技術嗎？需要1對1專業級導師指導嗎？想要團隊陪你一起進步嗎?歡迎加我為好友！微信號：iTekka。