使用一個事件處理程式同時處理多個表單元素

多表單元素優化步驟：

　　1. 給表單元素新增name屬性，名稱與state相同

　　2. 根據表單元素的型別獲取對應的值

　　3. 在change事件處理程式中通過[name]來修改對應的state

//1. 匯入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  受控元件：其值受到React控制的表單元素

  操作文字框的值：
*/

class App extends React.Component {
  state = {
      txt: '',
      content:
 
'',
      city:'bj',
      isChecked:false
    }

  handleForm = e => {
    //獲取當前DOM物件
    const target = e.target

    //根據型別獲取值
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value
    
    // 獲取name
    const name = target.name

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

  render () {
    
 
return (
      <div>
        {/* 文字框 */}
        <input type="text" value={this.state.txt} name="txt" onChange={this.handleForm} />
        <br/>

        {/* 富文字框 */}
        <textarea value={this.state.content} name="content" onChange={this.handleForm}></textarea>
        <br/>

        {
 
/* 下拉框 */}
        <select value={this.state.city} name="city" onChange={this.handleForm}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">廣州</option>
        </select>
        <br/>

        {/* 複選框 */}
        <input type="checkbox" checked={this.state.isChecked} name="isChecked" onChange={this.handleForm} />
      </div>
    )
  }
}

//渲染元件
ReactDOM.render(<App />, document.getElementById('root'))