React学习笔记（三）--- 基本表单处理

一、表单处理

1、受控组件

​ 在React中我们可以通过将 state 与表单元素的 value 绑定的方式，来控制表单元素的值，被控制的表单元素也被称为受控组件。但是表单元素是可输入的，也就是说值是会变化的，而在React中数据存放在state中，并且只能通过 setState() 方法来修改。

​ 此时可变的表单元素的值和不可直接改变的 state 发生了冲突，所以我们需要给表单元素绑定 change 事件，在对应的事件处理程序中，通过this.setState() 来修改表单元素绑定的state的值，这样就解决了冲突。

class App extends React.Component {
  state = {
    txt: ''
  }

  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.handleChange} />
      </div>
    )
  }

​ 常见的表单元素有：文本框、文本域、下拉框等，此时绑定的是 value属性。复选框，绑定的是 checked 属性。

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

    handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }

    // 处理富文本框的变化
    handleContent = e => {
        this.setState({
            content: e.target.value
        })
    }

    // 处理下拉框的变化
    handleCity = e => {
        this.setState({
            city: e.target.value
        })
    }

    // 处理复选框的变化
    handleChecked = e => {
        this.setState({
            isChecked: e.target.checked
        })
    }

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

                {/* 富文本框 */}
                <textarea value={this.state.content} onChange={this.handleContent}></textarea>
                <br/>

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

                {/* 复选框 */}
                <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked} />
            </div>
        )
    }
}

​ 上面我们实现了对多种表单元素的处理，但是每种表单元素都对应着一个单独的事件处理程序，代码太繁琐，我们可以对其进行优化，优化的方式为：给每个表单元素添加name属性，name属性的值与表单元素绑定的state名称相同，然后在事件处理程序中，先借助事件处理对象来判断表单元素的类型，然后再根据不同的name值，改变对应的state属性：

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" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br/>

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

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

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

2、非受控组件

​ 在React中，我们可以借助 ref ，使用原生DOM的方式来获取表单元素的值，此时仅仅是获取值，而不是修改值，所以被称为非受控组件。

class App extends React.Component {
  constructor() {
    super()

    // 1.创建ref
    this.txtRef = React.createRef()
  }

  // 获取文本框的值
  getTxt = () => {
      // 3. 通过ref对象来获得表单元素的值
    console.log('文本框值为：', this.txtRef.current.value);
  }

  render() {
    return (
      <div>
        // 2.将创建好的 ref 对象添加到表单元素中
        <input type="text" ref={this.txtRef} />
        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
}