React的form表单提交

包括了表单里input radio select checkbox textarea form 等一些操作，

 import React,{Component} from 'react';

 class Reactform extends Component {
     constructor(props) {
         super(props);
         this.state = { 
             msg:'React表单',
             name:'',
             sex:'1',
             cty:'',
             info:'', 
             citys:[
                 '北京','上海','深圳'
             ],
             hobby:[
                 {
                     title:'睡觉',
                     'checked':true
                 },
                 {
                     title:'打游戏',
                     'checked':false
                 },
                 {
                     title:'旅游',
                     'checked':true
                 }
             ]
          };
     }
     handelSubmit=(e)=>{
         // 一点提交就会刷新，阻止submit事件
        e.preventDefault();
        console.log(this.state.name,this.state.sex,this.state.cty,this.state.hobby,this.state.info );
     }
     handelName=(e)=>{
         this.setState({
             name:e.target.value
         })
     }
     handelSex=(e)=>{
        this.setState({
            sex:e.target.value
        })
     }
     oncity=(e)=>{
         this.setState({
            cty:e.target.value
         })
     }
     handelChecked=(key)=>{
        var hobby = this.state.hobby;
        hobby[key].checked = !hobby[key].checked;

         this.setState({
           hobby:hobby

         })
     }
     handelinfo=() =>{
         this.setState({
             info:this.refs.info.value
         })
     }
     render() {
         return (
             <div>
                  <hr/>
                  <h2>{this.state.msg}</h2>
                  <form onSubmit ={this.handelSubmit}>
                        <label>用户名</label>
                        <input type="text" value={this.state.name} onChange={this.handelName}/>
                        <br/>
                        <br/>
                        <label htmlFor="性别">性别:</label>
                             <input type="radio" value='1' checked={this.state.sex ==1} onChange={this.handelSex} />男
                             <input type="radio" value='2' checked={this.state.sex ==2} onChange={this.handelSex} />女
                        <br/>
                        <label htmlFor="地址">地址:</label>
                        <select name="" value={this.state.cty} onChange={this.oncity}>
                           {
                               this.state.citys.map((item,key)=>{
                               return <option key={key}>{item}</option>
                               })
                           }
                        </select>
                        <br/>
                        <label htmlFor="爱好">爱好:</label>
                        {
                            this.state.hobby.map((item,key)=>{
                                return(
                                    <span key={key}>
                                        <input type="checkbox" checked={item.checked} onChange={this.handelChecked.bind(this,key)}/>
                                        <label htmlFor="">{item.title}</label>
                                    </span>
                                )
                            })
                        }
                        <textarea name="" ref='info' value={this.state.info} onChange={this.handelinfo} cols="30" rows="10"></textarea>
                        <br/>
                        <br/>
                        <input type="submit" value="提交"/>
                  </form>
             </div>
         );
     }
 }
 
 export default Reactform;

如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！