react-表单

先来看下示例

import React ,{Component} from 'react'
let defaultValue = {
  username:'qqq',
  password:'',
  sex:'1',//1,男 0，女
  ah:["足球"],
  city:'咸阳',
  loveCity:[],
  desc:'be happy'
}
export default  class User extends Component{
  constructor () {
    super();
    this.state = {
      reginfo:{
        ...defaultValue
      },
      love:['篮球','足球','羽毛球'],
      cityList:['北京','上海']
    }
  }
  //单行文本框，多行文本框，单选
  singleChange(attr,e){
    console.log(attr)
    console.log(e.target.value)
    let newval = e.target.value
    this.setState(state => ({
      reginfo:{...state.reginfo,[attr]:newval}
    }))
  }
  //多选 下拉
  multipleChange(attr,e){
    console.log(attr,e.target.value)
    let newval = e.target.value
    let oldArr = this.state.reginfo[attr]
    let idx = oldArr.indexOf(newval)
    console.log(idx)
    if(idx === -1){
      oldArr.push(newval)
    }else{
      oldArr.splice(idx,1)
    }
    this.setState(state =>({
      reginfo:{
        ...state.reginfo,
        [attr]:oldArr
      }
    }))
  }
  submit(){
    console.log(this.state.reginfo)
  }
  reset(){
    this.setState({
      reginfo:{
        ...defaultValue
      }
    })
  }
  render(){
    let reginfo = this.state.reginfo
    return (
      <div>
        <p>姓名：<input type="text" value={reginfo.username} onChange={this.singleChange.bind(this,'username')}/>{reginfo.username}</p>
        <p>密码：<input type="password" value={reginfo.password} onChange={this.singleChange.bind(this,'password')} />{reginfo.password}</p>
        <p>性别：
          <input type="radio" id='man' value='1' checked={reginfo.sex === '1'} onChange={this.singleChange.bind(this,'sex')} />
          <label htmlFor="man">男</label>
          <input type="radio" id='women' value='0' checked={reginfo.sex === '0'} onChange={this.singleChange.bind(this,'sex')} />
          <label htmlFor="women">女</label>
        </p>
        <p>爱好：
          {
            this.state.love.map((val,idx) =>{
              return (
                <label key={idx}><input type="checkbox" checked={reginfo.ah.includes(val)} value={val} onChange={this.multipleChange.bind(this,'ah')} />{val}</label>
              )
            })
          }
        </p>
        <p>家乡：
          <select onChange={this.singleChange.bind(this,'city')} value={reginfo.city} multiple={false}>
            <option value="" >==请选择==</option>
            {
              this.state.cityList.map((val,idx) =>{
                return (
                  <option value={val} key={idx}>{val}</option>
                )
              })
            }
          </select>
          {reginfo.city}
        </p>
        <p>想去的地方：
          <select onChange={this.multipleChange.bind(this,'loveCity')} value={reginfo.loveCity} multiple={true}>
            {
              this.state.cityList.map((val,idx) => {
                return (
                  <option value={val} key={idx}>{val}</option>
                )
              })
            }
          </select>
          {JSON.stringify(reginfo.loveCity)}
        </p>
        <p>
          <textarea value={reginfo.desc} onChange={this.singleChange.bind(this,'desc')}></textarea>
          {reginfo.desc}
        </p>
        
        <button onClick={this.submit.bind(this)}>提交</button>
        <button onClick={this.reset.bind(this)}>重置</button>
      </div>
    )
  }
}

通过示例我们可以知道，react表单控件和原生表单控件是有一些区别的，在HTML中，表单元素('input','select','textarea')之类的表单元素通常自己维护自己的state，并根据用户输入进行更新。而在React中，可变状态(mutable state)通常保存在组件的state属性中，并且只能通过setState改更新。在示例中，我们还发现，在HTML中，select表单元素选择使用在option上使用selected属性，但是在react表单元素中直接在select上使用value值控制选择就行，如果是多选(mutiple='true')，value值给传一个数组，如果是mutiple='false'，value值得是一个标量