React表单里受控组件和非受控组件

通过受控组件和非受控组件两种方式获取表单的值

受控组件

官方说明
React受控组件链接

1.声明
2.将value绑定到声明的对象中
3.绑定onChange改变触发的函数事件

import React, { Component } from 'react'

export default class App extends Component {
    //在state中添加一个状态，作为表单元素的value值
    state={
        account:'',
        pwd:''
        isRich:true,
        desc:''
    }
	//改变值的函数
    handleAccount=(e)=>{
        this.setState({
            account:e.target.value
        })
    }
	
    handlePwd=(e)=>{
        this.setState({
            pwd:e.target.value
        })
    }
    //获取选择框的函数
     handleIsRich=(e)=>{
        this.setState({
            isRich:e.target.checked
        }) 
    }
     
    handleOnchage=(e)=>{
        this.setState({
           desc:e.target.value
       })
    }
	//打印表单的值
    getValue=()=>{
        console.log(this.state);
    }
    render() {
        return (
            <div>
                <div className="container">
                
                    <br />
            	    //给表单元素绑定change事件，将表单元素的value值设置为对于的state的值
                    账号:<input type="text" onChange={this.handleAccount} value={this.state.account} 						   name="account"/>
                    <br/>
                    密码:<input type="password" onChange={this.handlePwd} value={this.state.pwd} 							   name="pwd"/>
                    选中与否:<input type="checkbox" checked={this.state.isRich} onChange=								  {this.handleIsRich}/>
                    描述:<input type="textarea" value={this.state.desc} onChange={this.handleOnchage} />
                      //点击获取到表单的值
                    <button onClick={this.getValue}>点击获取数据</button>
                </div>
            </div>
        )
    }
}

受控组件优化

import React, { Component } from 'react'

export default class App extends Component {
    state={
        account:'',
        pwd:'',
        isRich:true,
        desc:''
    }

    handleOnchage=(e)=>{
       //获取输入框的名字
       const name=e.target.name;
       //获取输入框的类型
       const type=e.target.type;
       //定义一个变量存值
       let value=''
       //判断输入框的类型是否为checkbox
       if(type==='checkbox'){
           //checkbox的值获取方式
           value=e.target.checked
       }else{
           //其他类型的值获取方式
           value=e.target.value
       }
        //设置state中属性的值
       this.setState({
        [name]:value
       })
    }

    // 打印数据
    getValue=()=>{
        console.log(this.state);
    }
    render() {
        return (
            <div>
                <div className="container">
                    我是一个类组件
                    <br />
                    文本类型:<input type="text" onChange={this.handleOnchage} value={this.state.account} 							name="account"/>
                    <br/>
                    密码类型:<input type="password" onChange={this.handleOnchage} value={this.state.pwd} 							name="pwd"/>
                    复选框:<input type="checkbox" checked={this.state.isRich} onChange=									{this.handleOnchage} name="isRich" />
                    文本域:<input type="textarea" value={this.state.desc} onChange={this.handleOnchage} 						name="desc" />

                    <button onClick={this.getValue}>点击获取数据</button>
                </div>
            </div>
        )
    }
}

非受控组件

三个步骤,
1创建引用,
2通过ref绑定到元素中
3,获取表单的值
代码示例

import React, { Component } from 'react'

export default class App extends Component {
    //非受控表单方法
   constructor(){
       super()
       //1创建引用
       this.accountRef=React.createRef()
       this.pwdRef=React.createRef()
       this.isRichRef=React.createRef()
   }
    getValue=()=>{
        //3获取表单的值
        console.log(
        this.accountRef.current.value,
        this.pwdRef.current.value,
        this.isRichRef.current.checked
        );
    }
    render() {
        return (
            <div>
                <div className="container">
            		//2. 绑定引用到 元素中
                    文本类型:<input type="text" ref={this.accountRef} autoComplete="off"/>
                    密码类型:<input type="password" ref={this.pwdRef}/>
                    复选框:<input type="checkbox" ref={this.isRichRef} />
                    文本域:<input type="textarea" />
                    <button onClick={this.getValue}>点击获取数据</button>
                </div>
            </div>
        )
    }
}

受控组件适用于大多数场景
非受控组件只适合表单提交等不用校验的情况下使用