React 学习笔记：form表单（二）

    1.表单分受控组件和非受控组件
        受控组件：我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”
        非受控组件：非受控组件将真实数据储存在 DOM 节点中
    2.受控组件
        1.<input>、 <textarea> 和 <select>
        2.使用：如何获取值以及更新值
          

  <input name="username" value={this.state.username} onChange={this.gaibian.bind(this)}>  
      方法1：
  gaibian(event){
       this.setState({
             username:event.target.value
       })
  }
       方法2：
  gaibian(event){
        this.setState({
             [event.target.name]:event.target.value
        })
  }

        3.<textarea> 不管是设置值还是获取值都使用value属性
        4.select

<select value={this.state.key} onChange={this.sel.bind(this)}>
            sel(event){
                this.setState({
                    key:event.target.value
                })
            }

        5.单选按钮
          

  <input type="radio" name='sex' value='nan' onChange={this.selsex.bind(this)}/> 男
            <input type="radio" name='sex' value='nv' onChange={this.selsex.bind(this)}/> 女

            selsex(event){
                // console.log(event.target.value)
                this.setState({
                    sex:event.target.value
                })
            }

        6.多选按钮

 <input type="checkbox" vaule="apple" onChange={this.friut.bind(this)}>
            <input type="checkbox" vaule="orange" onChange={this.friut.bind(this)}>
            <input type="checkbox" vaule="pie" onChange={this.friut.bind(this)}>

            friut(event){
                let cur = event.target.value;
                let arr = this.state.shuiguo;
                if(this.state.shuiguo.indexOf(cur) == -1 ){
                    arr.push(cur)
                    this.setState({
                        shuiguo:arr
                    })
                }else{
                    arr.splice(this.state.shuiguo.indexOf(cur),1)
                    this.setState({
                        shuiguo:arr                
                    })
                }
            }

        7.form标签上       

<form onSubmit={this.tijiao.bind(this)}>
     <input type="submit"  value="提交" />
<form>