React基础-不受控组件与受控组件的区别

<h4>不受控组件</h4>
<b>不受控组件,需要从refs中取值,组件中表单元素没有写value值，与state数据无关，无法由state管理,无法做实时的数据校验。一般在对值的控制度不高的情况下使用</b>

import React, { Component } from 'react'

export default class apps4 extends Component {
    constructor(props){
        super(props)
        this.state = {}
    }
    UsNamesubmit(){
        console.log(this.refs.username.value)
    }
    render() {
        return (
            <div>
                姓名: <input ref="username" type="text"/>
                <button onClick={this.UsNamesubmit.bind(this)}>打印名字</button>
            </div>
        )
    }
}

<h4>受控组件</h4>

受控组件 ,不需要从refs中获取元素的值,数据实时从this.state中获取,方便进行数据的实时校验,提高用户体验,适合在数据需要实时进行严格的逻辑时使用(判断值合法长度,是否为手机号等)

import React, { Component } from 'react'
export default class apps5 extends Component {
    constructor(props){
        super(props)
        this.state = {
            username:'',
            psw:''
        }
    }
    changeName(val){
        this.setState({
            username:val.target.value
        })
    }
    changePsw(val){
        this.setState({
            psw:val.target.value
        })
    }
    infoSubmit(){
        console.log(this.state.username);
        console.log(this.state.psw);
        
    }
    render() {
        return (
            <div>
                姓名: <input type="text" value={this.state.username} onChange={this.changeName.bind(this)}/>{/* 绑定value值和onChange是必须的 */}
                密码: <input type="password" value={this.state.psw} onChange={this.changePsw.bind(this)}/>
                <button onClick={this.infoSubmit.bind(this)}>打印姓名密码</button>
            </div>
        )
    }
}