受控和非受控输入

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

受控输入

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

import React, { useState } from 'react';

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

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

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

不受控制的输入

在不受控输入中，输入字段的值不直接由 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 (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

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

以上是受控和非受控输入的详细内容。更多信息请关注PHP中文网其他相关文章！