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

reactjs React.js

逆天小卤蛋Green

2020-03-12

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

第1308篇《什么是受控组件和非受控组件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Eva西里 2020.03.12
  • 受控组件使用回调向其他组件通知有关更改的信息。例如：<Button onClick={() => console.log("clicked")}>Click</Button>。
  • 不受控制的组件不会将其他组件的更改通知其他组件，您只能使用ref-s访问组件。如果您需要访问HTML元素的实际dom，引用可能会很有用
前端猿 2020.03.12

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android