React_8 表单处理(受控组件）

在HTML中的表单元素是可输入的，也就是有自己的可变状态，而react中的可变状态通常保存在state中，并且只能通过setState()方法来修改。所以在理论上会有一定冲突。

所以React将state与表单元素值value绑定在一起，由state的值控制表单元素的值。

受控组件

由state控制状态的组件称为受控组件

步骤：

1.在state中添加一个状态，作为表单的value值（控制表单元素值的来源）

2.给表单元素绑定change事件，将表单元素的值设为state的值（控制表单元素值的变化）

state={ txt:''}
<input type="text" value={this.state.txt} 
onChange={(e)=>{this.setState({txt:e.target.value})}} />

表单中复选框改造为受控组件与以上方式不大相同：

state={
        isChecked:false,
   }
 // 处理复选框变化
    changeChecked=e=>{
        this.setState({
            isChecked:e.target.checked
        })
    }

render(){
        // 箭头函数中的this指向外部韩静，此处指向render()方法
        return (
            <div>
                <input type='checkbox' checked={this.state.isChecked} onChange={this.changeChecked}></input>
            </div>
            
        )
    }

多元素表单优化

按照以上方式，每一个表单元素都需要绑定一个change事件，这样在多表单元素下控制起来会很繁琐，所以我们需要对其进行优化：

步骤如下：

 1. 给表单元素添加name属性，名称与state中对应属性名称相同 如:

state={
   txt:'',
}
<input type="text" name="txt" value={this.state.txt} onChange={this.handeForm}/>

优化时我们是使用同一个处理程序去处理表单change事件，所以name属性是为了区分不同的表单元素的

2. 根据表单元素类型获取对应值

3. 在change事件处理程序中通过 [name] 来修改对应的state  ([name] 是es6 的属性名表达式)

 handeForm=(e)=>{
       //根具表单元素类型获取值 
        const target=e.target;
        const value=target.type==='checkbox'?target.checked:target.value;

        // 获取name
        const name=target.name;

        //根据name设置对应state
        this.setState({
            [ name ]:value
        })
}