受控组件vs非受控组件（input为例）

表单可以说是一个web应用里面的核心组件之一了，如何操作表单也是一个前端的基础。以表单组件input 来说，我对受控和非受控组件的理解如下。
非受控的组件input它的值是来自于dom本身，在react 中是用ref 获取dom然后拿到它的value
代码如下

import React from 'react';
class Demo extends React.Component{
    handleSubmit () {
        const val = this.myInput.value;
        console.log(val)
    }  
    render(){
        return (
                <div>
                  <input ref={element=>this.myInput=element}/>
                  <button onClick={this.handleSubmit}>click me</button>
                <div/>
              )
}

以上代码就是通过获取ref 然后拿到input的值。
另一种就比较 React了，用props的方式，组件input 的值是来自于props

import React from 'react';
class Demo1 extends React.Component{
    this.state = {
          value:' '
    }
    onChange (e) {
        const value = e.currentTarget.value;
         this.setState({value:value});
    }  
    render(){
        const { value } = this.state;
        return (
                <div>
                  <input value={value} onChange={e=>this.onChange(e)}/>
                  <button disabled={value.length <6 }>click me</button>
                <div/>
              )
}

这个input的值是由state来控制的，那么在任何时候你都可以对输入的值进行控制，所以叫受控组件；
在上面的例子中，假设字符串长度小于6就无法提交，那么，在你输入不达标的时候，你的按钮都是处于无法点击的状态。

基本上来讲，这些概念也可以用于其他的表单组件（radio，select 等等）
参考：https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

受控组件vs非受控组件（input为例）

推荐阅读更多精彩内容