根据react的示例，要取得受限组建的值，可以采用下面的方法：

import React ,{PropTypes}from 'react';import { render } from 'react-dom';const styles={    mb10:{        marginBottom:'15px'    },    w200:{        width:'200px',    }}class test extends React.Component{    constructor(props){        super();//和react没什么关系，javascript的特性，用于访问父对象上的函数。        this.state={            uName:'',            choose:'1',//==>设置默认值            gender:'Male',//==>设置默认值            city:{                cd:false,                bj:true,                sh:true            },            desc:'',        }    };    nameChange = (event)=> {        this.setState({            uName:event.target.value        });    };    chooseChange = (event) =>{        this.setState({            choose:event.target.value        });        console.log(event.target.value)//==>立即打印值    };    handleGenderChange = (e) => {          this.setState({            gender: e.target.value      });    };    cityChang = (event) => {        const value = event.target.value;        const city = Object.assign({}, this.state.city);        city[value] = !city[value];        this.setState({            city: city        });    };    descChange = (e) => {        this.setState({            desc:e.target.value        })    };    formSubmit = () => {        console.log(this.state)//打印全部        console.log('uName是：'+this.state.uName)        console.log("select值是："+this.state.choose)        console.log("radio值是："+this.state.gender)        console.log("选择的城市是："+ Object.keys(this.state.city).filter(item => this.state.city[item]).join(','))        console.log("文本域内容是："+this.state.desc)    };    render(){        const selectList=[            {value:'1',lable:'选择1'},            {value:'2',lable:'选择2'},            {value:'3',lable:'选择3'},            {value:'4',lable:'选择4'},            {value:'5',lable:'选择5'},            {value:'6',lable:'选择6'}        ]        return(            
     
                
      
                    
       
                                姓名：                        
                                
        {
   this.state.nameError}                    
       
                    
       
                                下拉框：                        
                                {selectList.map((list,index)=>(                            {list.lable}                        ))}                                            
       
                    
       
                                单选框：                        
                                男                        
                                女                    
       
                    
       
                                复选框：                        
        成都                        
        北京                        
        上海                                            
       
                    
       
                                文本域：                        
                                                    
       
                    
                       
      
            
     
        )    }}export default test;

测试打印值如下：

上面这种方法，是可以实现需求，但是当表单字段很多的时候，就比较尴尬了。不过有方法可以简写代码。

把onChange事件修改成一个，如下：

handleChange = (e) => {        this.setState({            [e.target.name]:e.target.value        })        console.log(e.target.value)//==>调试打印值    };

dom部分也就要把onChange绑定的事件都改成这个，如下：（注意name和value的命名，与this.state中的保持一致）

     
          姓名：    
          
      {
   this.state.nameError}
     
     
          下拉框：    
          {selectList.map((list,index)=>(        {list.lable}    ))}    
     
     
          单选框：    
          男    
          女
     
     
          文本域：    
          
     

这种方法已经相对减少代码量了，但是CheckBox不能使用这种方法，CheckBox要单独写一个onChange事件，示例如第一段代码中的this.cityChang事件。

也可以使用react-compontent的form  可以大大简化代码。

https://github.com/react-component/form

关于箭头函数

以上示例使用箭头函数。

若函数是下面这种写法：

handleChange(e) {        this.setState({            [e.target.name]:e.target.value        })        console.log(e.target.value)//==>调试打印值    };

那么就要修改下constructor，加上bind，否则有this指向问题，会出现：'setState' of undefined错误

constructor(props){        super();//和react没什么关系，javascript的特性，用于访问父对象上的函数。        this.state={            uName:'',            choose:'1',//==>设置默认值            gender:'Male',//==>设置默认值            city:{                cd:false,                bj:true,                sh:true            },            desc:'',        };        this.handleChange=this.handleChange.bind(this);    };

更推荐这种写法，效率高于箭头函数。