React受控和不受控制的输入

受控输入和非受控输入是在 Web 开发中表单输入上下文中使用的术语，尤其是在 React 之类的框架中。

受控输入

在受控输入中，输入字段的值由组件的状态控制。这意味着组件的状态保存输入的当前值，当输入值发生变化时（例如，通过用户输入），它会更新状态，输入值会反映状态。这通常是通过将输入的值 prop 设置为状态值并提供 onChange 处理程序来在输入发生变化时更新状态来完成的。受控输入通常用于 React 应用程序中的表单处理。

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    
  );
}

不受控制的输入

在非受控输入中，输入字段的值不直接由 React 状态控制。相反，输入元素在内部管理自己的状态。这意味着 React 无法直接控制输入值，并且要获取该值，您通常必须直接访问 DOM（例如，使用 refs）而不是查询 React 状态。非受控输入在 React 中不太常见，但在某些情况下很有用，例如处理复杂的表单行为或与以不同方式管理输入状态的非 React 库集成。

import React, { useRef } from 'react';

function UncontrolledInputExample() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    

      
      Get Value
    
  );
}

总而言之，受控输入将输入值直接绑定到 React 状态，从而在 UI 和状态之间提供更多控制和同步。不受控输入由 DOM 或其他库内部管理，React 会在需要时间接访问它们的值。