188

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

4

5 回答 5

248

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

  • 受控组件是一种通过其当前值并props通过回调（如onChange. 父组件通过处理回调和管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。
  • 不受控制的组件是在内部存储自己的状态的组件，您可以在需要时使用 a 查询 DOM以ref找到其当前值。这有点像传统的 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>

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

于 2017-03-01T03:44:53.290 回答
29

它们都呈现表单元素

非受控组件和受控组件是用于描述呈现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 表单元素的默认行为。

我们通过设置其属性和事件将表单元素<input>（<textarea>或<select>）连接到状态来创建受控组件。valueonChange

示例 - 受控组件：
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} />;
}
于 2021-07-12T19:03:03.070 回答
4

受控组件是从回调函数中获取更改值的组件，非受控组件是从 DOM 获取更改值的组件。例如，当输入值改变时，我们可以在受控组件中使用 onChange 函数，也可以像 ref 一样使用 DOM 获取值。

于 2020-09-14T18:18:29.530 回答
0

受控组件主要是那些组件的任何 prop 值都来自父组件或存储（如 redux 的情况）的组件。例子：

<ControlledComp value={this.props.fromParent}/>

在不受控制的组件的情况下，可以根据事件处理从组件的状态中获取组件值。例子：

<UncontrolledComp value={this.state.independentValue}/>
于 2021-01-05T17:44:57.310 回答
0

受控组件不保持其状态。

他们需要的数据从父组件传递给他们。

它们通过回调函数与这些数据进行交互，回调函数也从父级传递给子级。

于 2022-02-05T01:09:27.973 回答