什么是 React 受控组件和不受控组件？

Question

ReactJS 中的受控组件和非受控组件是什么？它们彼此有何不同？

原文由 Xin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这与有状态的 DOM 组件（表单元素）有关，React 文档解释了其中的区别：

• 受控组件 是通过 --- 获取其当前值并通过 props 等回调通知更改的 onChange 。父组件通过处理回调和管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。
• 不受控制的组件 是在内部存储自己状态的组件，您可以使用 ref 查询 DOM，以便在需要时找到其当前值。这有点像传统的 HTML。

大多数原生 React 表单组件都支持受控和不受控的使用：

 // Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

在大多数（或所有）情况下 ，您应该使用受控组件。

原文由 Aaron Beall 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

它们都呈现表单元素

Uncontrolled component 和 Controlled component 是用来描述渲染 HTML 表单元素 的 React 组件的术语。每次您创建一个呈现 HTML 表单元素的 React 组件时，您都在创建这两个元素之一。

不受控组件 和 受控组件 的不同之处在于它们从 表单元素 访问数据的方式（ <input> ， <textarea> ， <select> ）。

不受控制的组件

不受控组件 是呈现表单元素的组件，其中表单元素的数据由 DOM 处理（默认 DOM 行为）。要访问输入的 DOM 节点并提取其值，您可以使用 ref 。

示例 - 不受控制的组件：

 const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

受控组件

受控组件 是呈现表单元素并通过将表单数据保持在组件状态中来控制它们的组件。

在 受控组件 中，表单元素的数据由 React 组件（而非 DOM）处理并保存 在组件的状态 中。受控组件基本上会覆盖 HTML 表单元素的默认行为。

We create a controlled component by connecting the form element ( <input> , <textarea> or <select> ) to the state by setting its attribute value and事件 onChange 。

示例 - 受控组件：

 const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);

  return <input type="text" value={email} onChange={handleInput} />;
}

原文由 urosc 发布，翻译遵循 CC BY-SA 4.0 许可协议