4-form表单的双向绑定

概念：表单中的input框等其他标签，值变化时会触发函数，改变state中的值，反过来修改state中的值也会改变input框中值的展现

实现：利用类组件里的state属性来实现(setState会再次渲染)  利用input框中的checked属性改变选中状态

文本输入框： 
用户名：<input type="text" value={this.state.inputvalue} onChange={this.inputchange}/> 

触发函数：
 inputchange = (e)=>{
        console.log(e);
        console.log(e.target.value);
        this.setState({inputvalue:e.target.value}); //改变state中的值
    }

单选框：
如何做到互斥？利用name属性，值一样，属于一组，自动互斥

 性别：<input type="radio" value='男' checked={this.state.gendervalue==='男'?true:false} onChange={this.genderchange} name='gender'/>男   
 性别：<input type="radio" value='女' checked={this.state.gendervalue==='女'?true:false} onChange={this.genderchange} name='gender'/>女

触发函数： 
genderchange = (e)=>{
            console.log(e.target.value);
            this.setState({gendervalue:e.target.value});//设置state的值
    }

复选框：
爱好：{this.state.hobby.map((item,index)=>{
        return (
          <span>
                                
            <input type='checkbox' value={item.name} checked={item.checked} onChange={this.hobbychange.bind(this,index)}/>{item.name}
                                
         </span>
                                
       );
     }
｝

触发函数：
 hobbychange = (index,e)=>{
            let hobbyc = this.state.hobby;             //先用变量接收state的值，再修改值
            hobbyc[index].checked = !hobbyc[index].checked;
            this.setState({hobby:hobbyc});       //再把变量赋值给state值
    }
//错误写法

this.setState({hobby[index].checked:!hobby[index].checked});

//会报错，不支持这样写

 

转载于:https://www.cnblogs.com/wskb/p/11023537.html