react表单处理备忘

import React, {Component} from 'react'
import ReactDom from 'react-dom'

class BookManager extends Component{
    constructor(props){
      super(props)
      this.state={gender:"male",favs:['football'],furite:'pear'}
    }
    //处理单选
    _handleGenderChange=(event)=>{
      let value=event.target.value
      this.setState({gender:value})
    }
    //处理多选
    _handleFavsChange=(event)=>{
      let favs=this.state.favs.slice()
      let fav=event.target.value
      let index=favs.indexOf(fav)
      if(index>=0) favs.splice(index,1)
      else favs.push(fav)
      this.setState({favs:favs})
    }
    //处理下拉选择
    _handleFruiteChange=event=>{
      let value=event.target.value
      this.setState({furite:value})
    }
    render(){
      return (
        <div>
            <input type="radio" name="gender" onChange={this._handleGenderChange} defaultChecked value='male'/>男
            <input type="radio" name="gender" onChange={this._handleGenderChange} value='female'/>女

            <hr/>
            <input type="checkbox" name="favs" onChange={this._handleFavsChange} value="basket"/>蓝球
            <input type="checkbox" name="favs" defaultChecked onChange={this._handleFavsChange} value="football"/>足球
            <input type="checkbox" name="favs"  onChange={this._handleFavsChange} value="swim"/>游泳
            <hr/>
            <select value={this.state.furite} onChange={this._handleFruiteChange}>
              <option value="apple">苹果</option>
              <option defaultChecked value="pear">梨</option>
              <option value="oringe">桔子</option>
            </select>
            <h3>性别：{this.state.gender}</h3>
            <h3>爱好：{this.state.favs.join('-')}</h3>
            <h3>水果：{this.state.furite}</h3>
        </div>
      )
    }
}
ReactDom.render(<BookManager/>,document.getElementById('root'))