React09-表单组件React09-表单组件再react中我们也需要对表单元素进行操作，不同于Vue，目前没有提供

React09-表单组件

再react中我们也需要对表单元素进行操作，不同于Vue，目前没有提供对应的v-model这种指令。

主要涉及到input、textarea、select、radio、checkbox等等元素进行值的操作

一、受控组件

在表单元素中，如果要动态绑定值<input value={this.state.username}>

获取这个值，我们需要通过事件的方式来获取

受控组件概念：当我们在文本框里面value属性动态绑定state里面的值，这个input组件就称为受控组件，文本框里面的内容无法被你修改。（文本框无法输入内容）

要获取文本框的值

将state的属性绑定到文本框的value属性。input组件受控。
给文本框提供onChange事件，一旦文本里面的值发生变化，动态获取到变化的值。
将得到的值更新到state里面。state的属性一旦发生变化，input文本框的值也会跟着变化

import React, { Component } from 'react'
export default class ControllForm extends Component {   
    state = {        username:"小王"    }   
inputChange = (event)=>{       
    const username = event.target.value   
    this.setState({            username        }) 
}  
render() {   
    return (     
        <div>         
            <input type="text" value={this.state.username} onChange={this.inputChange} />   
        </div>       
    )  
}}

获取下拉框的值

import React, { Component } from 'react'
export default class ControllForm extends Component {   
    state = {        idCard:"jsz",    }    
cardChange = (event)=>{      
    const card = event.target.value;  
    this.setState({            idCard:card        })  
}    
render() {      
    return (       
        <div>           
            <select name="" id="" value={this.state.idCard} onChange={this.cardChange}>  
                <option value="sfz">身份证</option>               
                <option value="jsz">驾驶证</option>       
            </select>        
        </div>    
    )    
}}

给select标签绑定一个value属性，这个属性值决定了option要选中某一个。
给select标签绑定change事件。你可以得到改变后的结果，
获取到结果，this.setState的方式来设置给state属性值

复选框

<input type="checkbox" onChange={this.getCheckBox} value="lq" name='likes' />   
<input type="checkbox" value="zq" name='likes' />      
<input type="checkbox" value="pq" name='likes'/>

如果需要选中复选框，你们需要给checkbox绑定发checked属性
如果你要得到复选框的值，onChange事件

受控组件：指的表单组件，当value值根state的属性绑定在一起的时候，这个组件处于受控状态。通过onChange的方式可以获取改变的值，this.setState修改

二、非受控组件

无需将组件的value和state状态绑定在一起，

你可以通过获取节点的方式来获取节点对应的值。

非受控组件：提供了让你操作节点的功能

过时的方法refs

import React, { Component } from 'react'
export default class ControllForm2 extends Component { 
login = ()=>{   
    // refs在目前版本中不推荐大家使用   
    console.log(this.refs.username2.value); 
}  
render() {   
    return (   
        <div>     
            <input type="text" ref="username2" />   
            <button onClick={this.login}>登录</button>   
        </div>  
    )  
}}

在任何一个节点身上绑定一个属性ref属性，通过refs来获取这个引用。

ref回调函数获取节点

react提供了新的方式来获取节点

import React, { Component } from 'react'
export default class ControllForm2 extends Component { 
login = ()=>{   
    // refs在目前版本中不推荐大家使用   
    // console.log(this.refs);    
    console.log(this.usernameInput); 
}  
render() {   
    return (   
        <div>    
            <input type="text" ref="username2" />   
            <input type="password" ref={input=>this.usernameInput=input} />  
            {/* <input type="password" ref={function(input){this.usernameInput=input}} /> */} 
            <button ref="btn" onClick={this.login}>登录</button>    
        </div>   
    ) 
}}

核心代码：ref={input=>this.usernameInput=input}

ref这个属性，需要接受一个函调函数作为参数。底层调用函数的后，将得到节点回传i回来

check = (val)=>{}<todoList myref={this.check}>   
<todoList myref={(val)=>{     this.xxxx = val}}>

通过createRef来获取节点

import React, { Component } from 'react'
export default class ControllForm2 extends Component {  
constructor(){   
super();   
//  创建一个节点的引用   
this.cardInput = React.createRef() 
}  
login = ()=>{  
    console.log(this.cardInput.current); 
}  
render() {   
    return (   
        <div>      
            <input type="password" ref={this.cardInput} />    
            <button ref="btn" onClick={this.login}>登录</button>   
        </div>   
    ) 
}}

你需要在构造函数新定义一个节点引用，将这个变量赋值ref，底层就会将得到的对象返回给cardInput

返回的结果：

{current:input}

推荐用前面这种，这种方式要稍微麻烦一点。