小编典典

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

all

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


阅读 105

收藏
2022-06-23

共1个答案

小编典典

这与有状态的 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>

在大多数(或所有)情况下,您应该使用受控组件

2022-06-23