受控组件与非受控组件

react中受控组件与非受控组件都是针对表单的，受控组件就是，通过state获取值的组件，在react中另外一种直接通过ref获取值得组件就是非受控组件。
代码如下
受控组件
表单元素是可输入的，也就是有自己的可变状态
React中可变状态通常保存在state中，并且只能通过setState() 方法来修改
state与表单元素值value绑定在一起，有state的值来控制表单元素的值

class App extends React.Component {
    constructor(){
        super()
        this.inputChange = this.inputChange.bind(this)
    }
    state = {
        txt : ''
    }
    inputChange(e){
       this.setState({
           txt: e.target.value
       })
    }
    render(){
        console.log(this.state);
        
        return (
            <div>
                {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
                <input type="text" value={this.state.txt} onChange={this.inputChange}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

非受控组件
调用 React.createRef() 方法创建ref对象
将创建好的 ref 对象添加到文本框中
通过ref对象获取到文本框的值
非受控组件： 表单组件没有value prop就可以称为非受控组件

class App extends React.Component {
    constructor(){
        super()
        
        //创建 ref
        this.txtRef = React.createRef()
    }
    // 获取文本框的值
    getTxt =() => {
        console.log(this.txtRef.current.value)
    }
    render(){
        return (
          <div>
            <input type ="text" ref={this.txtRef} />
            <button onClick ={this.getTxt}>获取值</button>
          </div>
        )
    }
}

本文理解自：https://blog.csdn.net/qq_45690359/article/details/107190345