前言

React中的组件根据是否受React控制可分为受控的(controlled)和非受控的(uncontrolled)。

多数情况下，推荐使用受控组件实现表单。在受控组件中，表单数据由组件控制。

另外一种是非受控组件，这种方式下表单组件由DOM自身控制。

在react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）但是也可以转化成受控组件，就是通过 onChange事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件

受控组件

受控组件通过props获取其当前值，并通过回调函数(比如onChange)通知变化
受控组件中，组件渲染出的状态与它的value或checked属性相对应

受控组件会更新state的流程

   handleChange = e => this.setState({value: e.target.value})
   render() {
       return (     
          <input value="this.state.value" onChange={this.handleChange}/>   
   )}

每当用户输入时，input触发onChange事件，调用handleChange函数修改了value值。使用受控组件，每个状态的改变都有一个与之相关的处理函数。好处是可以直接修改或验证用户输入

在受控组件中，如果没有给输入框绑定onChange事件，将会收到react的警告
并且此时输入框除了默认值，是无法输入其他任何参数的

非受控组件

非受控组件即不受状态的控制，获取数据就是相当于操作DOM。

非受控组件的好处是很容易和第三方组件结合

export default function App() {
    const eleRef = useRef(null);
    const [submitContent, setSubmitContent] = useState("");

const handleSubmit = () => {
  // 通过ref获取输入框的值
  const content = eleRef.current?.value;
  setSubmitContent(content);
};

return (
  <div className="App">
    <input ref={eleRef} />
    <Button type="primary" onClick={handleSubmit}>
      提交
    </Button>
    <div>{submitContent ?? ""}</div>
  </div>
);
}

页面中包含一个输入框、一个按钮，通过ref获取到输入框的引用，在改变输入内容之后，点击提交，页面会展示输入框内容。

React通过ref获取input元素的值
input值由用户改变，点击提交按钮，在handleSubmit中通过ref获取DOM元素，进而读取输入框的值
输入框的变化并未交由组件控制，而是通过ref获取，也就是直接在DOM中读取

总结 :

React中的组件分为受控组件和非受控组件
受控组件的两个要点：
- 组件的value属性与React中的状态绑定
- 组件内声明了onChange事件处理value的变化
非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用

react受控组件和非受控组件

前言

受控组件

非受控组件

总结 :