react实现表单数据的实时绑定监听

import React,{Component} from 'react';

/**

 * 约束性和非约束性组件

 * 非约束性组：  <input type='text' defaultValue={this.state.username}/>这个defaultValue其实就是原生DoM中的value属性

 * 这样写出来的组件，其value值就是用户输入的内容，React完全不管输入的过程

 * 约束性组件：  <input type='text' value={this.state.username} onChange={this.handleUsername}/>

 * 这里，value属性不再是一个写死的值，他是this.state.username,this.state.username是由this.handleChange负责管理的

 * 这个时候实际上input的value根本不是用户输入的内容。而是onChange时间触发之后，由于this.setState导致了一次重新渲染。不过React会优化这个

 */

class ReactForm extends Component{

    constructor(props){

      super(props);

      //react可以在这里定义数据

 

      this.state={

          //这里面写一个对象

        msg:'react表单',

        name:'',

        sex:'1',

       city:'',

        citys:[

            '北京','上海','深圳'

        ],

        hobby:[

            {

                'title':"睡觉",

                'checked':true

            },

            {

                'title':"吃法",

                'checked':false

            },

            {

                'title':"敲代码",

                'checked':true

            },

 

        ],

 

        info:''

          }

    }

    handelSubmit=(e)=>{

        //阻止submit的提交事件

        e.preventDefault();

        console.log(this.state.name,this.state.sex,this.state.citys,this.state.hobby,this.state.info)

    }

 

    handelName=(e)=>{

      this.setState({

          name:e.target.value

      })

    }

    handelSex=(e)=>{

        this.setState({

           sex:e.target.value

        })

    }

    handelCity=(e)=>{

        this.setState({

           city:e.target.value 

        })

    }

 

    handelHobby(key){

        var hobby=this.state.hobby;

        hobby[key].checked=!hobby[key].checked;

        this.setState({

            hobby:hobby

        })

    }

    handelInfo=(e)=>{

        this.setState({

              info:e.target.value

        })

    }

 

    render(){

        return (

        <div>

           {this.state.msg}

           <form onSubmit={this.handelSubmit}>

                 用户名： <input type="text" value={this.state.name} onChange={this.handelName}></input><br/>

                 性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handelSex}/>男<br/>

                        <input type="radio" value="2" checked={this.state.sex==2} onChange={this.handelSex}/>女<br/>

                        居住城市： <select value={this.state.city} onChange={this.handelCity}>

                                    {

                                        this.state.citys.map(function(value,key){

                                            return <option key={key}>{value}</option>

                                        })

                                    }

                        </select>

                        爱好：

                                    {

                                        this.state.hobby.map((value,key)=>{

                                            return (

                                                 <div key={key}>

                                                    {value.title}<input type="checkbox" checked={value.checked} onChange={this.handelHobby.bind(this,key)}/>

                                                 </div>

                                          

                                            )

 

                                        })

                                    }

                                    <br/>

                                  备注：  <textarea value={this.state.info} onChange={this.handelInfo}/>

                  <input type="submit" value="提交"></input>

 

           </form>

        </div>

     

        )

    }

}

export default ReactForm;

注意多选框和radio的函数写法