react表单处理

react 如何处理表单，应用表单组件

1.文本框

input textarea

2.单选按钮与复选框

3.Select组件（单选，多选）

表单的几个重要属性：

1.状态属性：value,checked,selected
2.事件属性：

onChange,React支持DOMLevel3定义的所有表单事件(https://www.w3.org/TR/DOM-Level-3-Events/)_

相关form组件的代码如下：

import React,{Component} from 'react';
export default class MyForm extends Component{
    constructor(props){
        super(props);
         this.handleInputChange=this.handleInputChange.bind(this);
          this.handlePassChange=this.handlePassChange.bind(this);
        this.handleTextChange=this.handleTextChange.bind(this);
        this.handleRadioChange=this.handleRadioChange.bind(this);
        this.handleCheckChange=this.handleCheckChange.bind(this);
        this.handleSelectChange=this.handleSelectChange.bind(this);

        this.state={
            inputValue:"",
            passValue:"",
            textValue:"",
            radioVlue:"",
            food:[],
            area:'',
        };
    }
   handleInputChange(e){
       this.setState({
           inputValue:e.target.value,
       });
       console.log(e.target.value);
   }
   handlePassChange(e){
       this.setState({
           passValue:e.target.value,
       });
       console.log(e.target.value);
   }
   handleTextChange(e){
       this.setState({
           textValue:e.target.value,
       });
   }
   handleRadioChange(e){
       this.setState({
           radioVlue:e.target.value,
       });
       console.log(e.target.value);
   }
   handleCheckChange(e){
       const {checked,value}=e.target;
       let {food}=this.state;
       if(checked&&food.indexOf(value)===-1){
           food.push(value);
       }else{
           food=food.filter(i=>i!==value);
       }
       this.setState({
           food
       })
       console.log(food);
   }
   handleSelectChange(e){
       const {area}=this.state;
       this.setState({
           area:e.target.value,
       })
       console.log(e.target.value);
   }

   render(){
       const {inputValue,passValue,textValue,radioVlue,food,area}=this.state;
       return(
           

                
账号：
                
密码：
                
多行输入框：
                

                    
性别：
                    male:
                        
                    
                      female:
                        
                    
                    
请选择你喜欢的水果
                    
                        
                        苹果
                    
                     
                        
                        香蕉
                    
                     
                        
                        橙子
                    
                     
                        
                        芒果
                    
                    
请选择你所在城市
                    
                        北京
                        上海
                        广州
                        深圳
                    
                    

                        提交
                        大家好
                    
                
           
       )
   }
}

完整地址:https://github.com/wallowyou/form_react.git,克隆之后，npm install ;npm run build;