小沙坨
小沙坨

第6节 React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表2019-05-25

一、React不是一个MVVM的框架，VUE属于MVVM框架；

二、约束性组件和非约束性组件

2.1非约束性组件

这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。

2.2约束性组件

这里，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。
不过React会优化这个渲染过程，看上去有点类似双向数据绑定。

2.3完整DEMO示例

import React, { Component } from 'react';
class Home extends Component {
    constructor(props){
        super(props);
        this.state={
          username:'11111'
        }
    }

    handleUsername=(e)=>{
      this.setState({
        username:e.target.value
      })
    }
    
    render() {
      return (
        

              
React表单

              {/* MVVM */}
              
              {this.state.username}
              

              {/* MV */}
              
        

      );
    }
  }
  export default Home;

三、表单控件

3.1文本框

3.2单选框

性别: 男 
      女

3.3下拉框

3.4复选框

爱好:
{
    // 注意this指向
    this.state.hobby.map((value,key)=>{
        return (
            
                {value.title}
            
        )
    })
}

3.5完整示例

import React, { Component } from 'react';

class ReactForm extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg:"react表单",
            name:'',  
            sex:'1',     
            city:'',      
            citys:[ 
                '北京','上海','深圳'            
            ],
            hobby:[   
                {  
                    'title':"睡觉",
                    'checked':true
                },
                {  
                    'title':"吃饭",
                    'checked':false
                },
                {  
                    'title':"敲代码",
                    'checked':true
                }
            ],
            info:''   
        };
        this.handleInfo=this.handleInfo.bind(this);
    }
    handelSubmit=(e)=>{
            //阻止submit的提交事件
            e.preventDefault();
            console.log(this.state.name,this.state.sex,this.state.city,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
        })
    }

    handleInfo(e){
        this.setState({
            info:e.target.value
        })
    }
    
    render() {
        return (
            

                
{this.state.msg}

                

                  用户名:   


                  性别:   男 
                           女 

 
                 居住城市:  
                       
                


                 爱好:   
                    {
                        // 注意this指向
                        this.state.hobby.map((value,key)=>{
                            return (
                               
                                     {value.title} 
                               
                            )
                        })
                    }

                    


                  备注：