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 (
      

        
姓名：{reginfo.username}
        
密码：{reginfo.password}
        
性别：
          
          男
          
          女
        
        
爱好：
          {
            this.state.love.map((val,idx) =>{
              return (
                {val}
              )
            })
          }
        
        
家乡：
          
            ==请选择==
            {
              this.state.cityList.map((val,idx) =>{
                return (
                  {val}
                )
              })
            }
          
          {reginfo.city}
        
        
想去的地方：
          
            {
              this.state.cityList.map((val,idx) => {
                return (
                  {val}
                )
              })
            }
          
          {JSON.stringify(reginfo.loveCity)}
        
        

          
          {reginfo.desc}
        
        
        提交
        重置
      
    )
  }
}

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