React學習（九）：表單

一、react表單

在React中，form表單元素和其他的DOM不一樣，因為表單元素通常會保留一個內部的state狀態。
1、Html表單
在Html中，像 <input>, <textarea>和<select>等表單元素會維持自身狀態，並根據使用者輸入進行更新。

<form>
    <span>名字:</span>
	<input type="text" name="name" />
	<input type="submit" value="Submit" />
</form>

2、React表單
但在React中，可變的狀態通常儲存在元件的狀態屬性中，並且只能用 setState() 方法進行更新。

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}>
      	<span>名字:</span>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

二、select 標籤

React 在<textarea>和<input>標籤都是更新其 value 屬性進行更新。
而對<select>標籤不使用 selected 屬性，而在根 select 標籤上用 value 屬性來表示選中項。
1、Html select標籤
在 HTML <select>標籤使用 selected 屬性來設定選中

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

2、React select標籤
在 React <select>標籤並不使用 selected 屬性，而是在根 select 標籤上使用 value 屬性

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('你喜歡的風味是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          <span>選擇你喜歡的風味:</span>
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

三、多個表單

當處理多個 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>
        <span>參與:</span>
        <input
          name="isGoing"
          type="checkbox"
          checked={this.state.isGoing}
          onChange={this.handleInputChange} />
        <br />
        <span>來賓人數:</span>
        <input
          name="numberOfGuests"
          type="number"
          value={this.state.numberOfGuests}
          onChange={this.handleInputChange} />
      </form>
    );
  }
}

·········································································································································
本文介紹React表單~~請大家多多指教，能get到知識點不要忘了關注點個贊~。