表单处理优化

使用一个事件处理程序同时处理多个表单元素

多表单元素优化步骤：

　　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'))