react表单处理 受控组件

将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。

绑定步骤：

• 在state中添加一个状态，作为表单元素的value值
• 给表单元素绑定change事件，将表单元素的值设置为state的值

<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />

 

注：多表单元素需优化事件方法

this.setState({

    [e.target.name]: e.target.value

})

import React, { Component } from 'react'

export default class User2 extends Component {

  state = {
    userinfo: {
      username: 'admin',
      password: '',
      isSave: true,
      sex: '女'
    }
  }

  render() {
    let { username, password, isSave, sex } = this.state.userinfo
    return (
      <div>
        <div>
          {/* 受控组件 */}
          {/* 表单选项中的值都是string */}
          <input type="text" name="username" value={username} onKeyUp={this.addUser.bind(this)} onChange={this.setInput.bind(this)} />
        </div>
        <div>
          {/* 受控组件 */}
          {/* 表单选项中的值都是string */}
          <input type="text" name="password" value={password} onKeyUp={this.addUser.bind(this)} onChange={this.setInput.bind(this)} />
        </div>

        <div>
          {/* 不需要value中的数据 同时它还需要true/false布尔类型 */}
          <input type="checkbox" name="isSave" checked={isSave} onChange={this.setInput.bind(this)} />是否保存数据
        </div>

        <div>
          <input type="radio" name="sex" checked={sex === '男' ? true : false} value="男" onChange={this.setInput.bind(this)} />男
          <input type="radio" name="sex" checked={sex === '女' ? true : false} value="女" onChange={this.setInput.bind(this)} />女
        </div>


      </div>
    )
  }

  // 把input中的数据同步到state数据源中
  setInput(evt) {
    // 表单项名称 变量 => 变量的值才是对象中的key
    let name = evt.target.name

    // 获取表单项中的数据
    let value = evt.target.value

    // 复选框  它需要boolean类型
    if ('checkbox' === evt.target.type) {
      value = !this.state.userinfo[name]
    }

    // 同步到state数据源中
    this.setState(state => state.userinfo[name] = value)
  }

  addUser(evt) {
    if (evt.keyCode === 13) {
      console.log('提交了数据', this.state.userinfo);
      this.setState(state => state.userinfo.username = '')
    }
    // console.log(this.state.userinfo);
  }


}