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

Posted 2023-02-21

【中文标题】什么是 React 受控组件和非受控组件？

【英文标题】：What are React controlled components and uncontrolled components?

【发布时间】：2017-07-20 05:40:34

【问题描述】：

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

【参考方案1】：

它们都呈现表单元素

非受控组件和受控组件是用于描述呈现html表单元素的React组件的术语。每次你创建一个渲染 HTML 表单元素的 React 组件时，你就是在创建这两者之一。

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

不受控制的组件

uncontrolled component 是一个渲染表单元素的组件，其中表单元素的数据由 DOM 处理（默认 DOM 行为）。要访问输入的 DOM 节点并提取其值，您可以使用 ref。

示例 - 不受控制的组件：

const  useRef  from 'react';

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

受控组件

controlled component 是一个组件，它呈现表单元素并通过将表单数据保持在组件的状态来控制它们。

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

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

示例 - 受控组件：

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 />;

【参考方案2】：

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

<ControlledComp value=this.props.fromParent/>

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

<UncontrolledComp value=this.state.independentValue/>

【讨论】：

这并没有解释这个概念。请从其他答案中寻求帮助或干脆删除此答案

请更正您的答案，因为它不太正确

【参考方案3】：

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

【参考方案4】：

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

Controlled Component 是通过props 获取其当前值并通过onChange 等回调通知更改的方法。父组件通过处理回调和管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。 Uncontrolled Component 是在内部存储自己的状态的对象，您可以在需要时使用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>

在大多数（或所有）情况下you should use controlled components。

【讨论】：

取值不是通过state而不是props吗？

@IvankaTodorova 对于受控组件，值通过props 传入。不受控制的组件将使用state 在内部控制值本身。这是关键的区别。

它们之间的区别在于，它们的值被设置/传递并具有回调的组件被称为controlled components (<input type="text" value="value" onChange=handleChangeCallbackFn />) 与传统的 HTML 相比，传统的 HTML 中输入元素处理自己的值并且可以可以通过refs 读取，称为uncontrolled components (<value type="text" />)。受控组件通过setState 管理它们自己的状态，或者从它们的父组件中获取它作为道具。

如何调用一个组件，通过 props 获取它defaultValue，但通知控制器onBlur？

@PaulRazvanBerg 这听起来像是一种反模式，state should be controlled in a single place。通常你会lift state到最近的共同祖先。