表单可以说是一个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/
