Seven, React Detailed form of binding and non-binding component input text checkbox radio select textarea form and content acquisition

First, binding and non-binding components:

Non-binding Group:

MV：

<input type="text" defaultValue="a" />  

This is actually native defaultValue DOM attribute value of.
Such written components, and its value is the value of user input, React completely manage the input process.

Binding components:

MVVM：

<input value={this.state.username} type="text" onChange={this.handleUsername}  /> 

Here, value property is no longer a value written dead, he is this.state.username, this.state.username by this.handleChange responsible management.
This time is not actually input the value entered by the user content. But after onChange event is triggered, because the this.setState led to a re-rendering. But React optimizes the rendering process. Weekend looks a bit similar data binding

Second, the form

2.1 form values ​​to obtain, after the point of submission, output in the console

form.js：

import React, { Component } from 'react';

class Forms 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:''   
        }
    }
    // 1.得到input name值，并设置到state的name值里
    handlename=(e)=>{
      this.setState({
        name:e.target.value
      })
    }

    // 2.form提交后的表单处理函数
    subform=(e)=>{
      // 首先要阻止form自动刷新事件
      e.preventDefault();
      //在控制台输出得到的值
      console.log(this.state.name)
    }
    render() {
      return (
        <div>
        <h1>{this.state.msg}</h1>
        {/* 【form】监测到提交事件后，用subform函数接收表单并进行处理，
        如果用form必须在处理函数用preventDefault阻止刷新页面（其实不用form也可） */}
        <form onSubmit={this.subform}>
          <input type='text' value={this.state.name} onChange={this.handlename}/>
          <input type='submit' value='提交'/>
        </form>
        </div>
      );
    }
  } 
  export default Forms;

App.js：

import React from 'react';
//import logo from './logo.svg'; //引用logo
import './App.css';
import Demo from './components/forms.js'

function App() {
  return (
    <div className="App">  
        {/*<img src={logo} className="App-logo" alt="logo" />
        <Demo3 />*/}
        <Demo />
    </div>
  );
}
export default App;

Results:

The figure is submitted to multiple input points and effects

2.2 Other form processing: input-checkbox / {radio, select], textarea

【forms.js】

import React, { Component } from 'react';

class Forms extends Component {
    constructor(props){
        super(props);
        this.state={
          msg:"react表单",
            name:'',  
            sex:'1',     
            city:'北京',      //此处非常有必要设置成默认的第一个城市，因为处理函数是检测到select变化才会改变city值 
            citys:[   
                '北京','上海','深圳'            
            ],
            hobby:[   
                {'title':"睡觉",'checked':true },
                {'title':"吃饭", 'checked':false },
                {'title':"敲代码",'checked':true }
            ],
            info:''   
        }
        this.handleInfo=this.handleInfo.bind(this); //对应处理函数6，指向性问题，当然也可用箭头函数省略此处
    }
    // 1.form提交后的表单处理函数，直接
    subform=(e)=>{
      e.preventDefault();  //【注意】首先要阻止form自动刷新事件，如果外面不加form此处可省略
      console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby,this.state.info) //在控制台输出得到的值，获取哪个值就加个逗号也写上
    }

    // 2.得到input name值，并设置到state的name值里
    handlename=(e)=>{
      this.setState({
        name:e.target.value
      })
    }

    // 3.性别处理函数，哪个性别被点了，就获取哪个性别的值
    handleSex=(e)=>{
      this.setState({
        sex:e.target.value
      })
    }

    //4. 城市处理函数
    handleCity=(e)=>{
      this.setState({
        city:e.target.value
      })
    }

    //5. 爱好处理函数，checkbox它是多个值的，所以处理方式和一般的不同，html先接收传过来的key
    handlehobby=(key)=>{
      var hobby=this.state.hobby; // 先获取hobby所有值
      hobby[key].checked=!hobby[key].checked; //改变chcked的值，是true变false，反之亦然
      this.setState({
          hobby:hobby
      })
    }

    //6.备注信息处理
    handleInfo(e){
      this.setState({
          info:e.target.value
      })
  }

    render() {
      return (
        <div>
        <h1>{this.state.msg}</h1>
        {/*
        【form】监测到提交事件后，用subform函数接收表单并进行处理，如果用form必须在处理函数用preventDefault阻止刷新页面（其实不用form也可） 
        【input-radio】checked={this.state.sex==1}意思是：如果state.sex值==1，那么:checked='true'，否则就为“false”;
        【select】和原生html的不同：value写在最外面select上了；
                  注意map(function(value,key){return html...})，循环读取的用法，里面要有个return，返回html标签
        【input-checkbox】重点：onChange={this.handlehobby.bind(this,key)}，这里意思是绑定此处函数内部key的值，以传到处理函数中

        */}
        <form onSubmit={this.subform}>
          姓名：<input type='text' value={this.state.name} onChange={this.handlename}/> <br/><br/>

          性别：<input type='radio' value='1' checked={this.state.sex==1} onChange={this.handleSex} /> 男
               <input type='radio' value='2' checked={this.state.sex==2} onChange={this.handleSex} /> 女<br/><br/>

          城市：<select value={this.state.city} onChange={this.handleCity}>
                {
                this.state.citys.map(function(value,key){
                return <option key={key}>{value}</option>
                })
                }
               </select><br/><br/>
          
          爱好：{
            // 此处是箭头函数，因为指向不同
            this.state.hobby.map((value,key)=>{
              return(
              <span key={key}>
                <input type='checkbox'  checked={value.checked} onChange={this.handlehobby.bind(this,key)} /> {value.title}
              </span>
                    )
            }) 
           }
           <br/><br/>
           备注：<textarea vlaue={this.state.info}  onChange={this.handleInfo} /> <br/><br/>
          <input type='submit' value='提交'/>

        </form>
        </div>
      );
    }
  } 
  export default Forms;

【App.js】

import React from 'react';
import './App.css';
import Demo from './components/forms.js'

function App() {
  return (
    <div className="App">  
        <Demo />
    </div>
  );
}
export default App;

effect: