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 (
             

                  

                  
{this.state.msg}
                  

                        用户名
                        
                        

                        

                        性别:
                             男
                             女
                        

                        地址:
                        
                           {
                               this.state.citys.map((item,key)=>{
                               return {item}
                               })
                           }
                        
                        

                        爱好:
                        {
                            this.state.hobby.map((item,key)=>{
                                return(
                                    
                                        
                                        {item.title}
                                    
                                )
                            })
                        }
                        
                        

                        

                        
                  
             
         );
     }
 }
 
 export default Reactform;

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