检测组件外部的点击反应方式 NOT dom 访问

Question

我正在使用 React 实现裁剪功能。当用户右键单击时，会出现一个上下文菜单。在上下文菜单中，用户可以 select 裁剪项目。当用户 select 裁剪时，裁剪被激活。现在，我想在用户单击该分区之外时关闭裁剪状态。在没有 DOM 操作的情况下，我该如何做出反应？还是我必须使用 DOM 操作，例如 add EventListener & removeListener？在这里使用 DOM 访问权限有什么缺点？请让我彻底了解这一点，因为这将在我将要开发的许多功能中实现。例如，我正在谈论的上下文菜单，或下拉菜单。

这里有一个例子供参考 - Sandbox。现在，当用户在 ReactCrop 组件外单击时，我想通过反应方式关闭裁剪。

我不想继续 document.addEventListener or removeListener。

Answer 1

如果您真的非常不想将 dom 事件附加到您的组件，您可以在 Crop 组件后面添加一个 'dismisser' 组件并在那里处理重置。

const Dismisser = ({ onClick }) => <div onClick={onClick} style={{
  position: 'fixed',
  top: 0, left: 0, right: 0, bottom: 0,
  zIndex: 100,
}} />

在你的组件中：

{src && (
  <React.Fragment>
  <div style={{position: 'relative', zIndex: 200}}>
    <ReactCrop
      src={src}
      crop={crop}
      ...
    />
  </div>
  <Dismisser onClick={this.resetCrop} />
  </React.Fragment>
)}

Codesandbox

我会说这有点多 'React-y' 因为重置裁剪的责任委托给了另一个组件。但是，当您的 Crop 组件落后于其他 Dom 元素时，z-index 明智，它会给您带来麻烦。您可以使用门户来克服它，但它会开始变得复杂。

我认为附加 DOM 事件是一个有效的解决方案（只要您记得删除它们）。它更简单，而且它不像你直接使用 React 流之外的数据来操纵 dom 节点，这在大多数情况下是真正糟糕的情况。

检测组件外部的点击反应方式 NOT dom 访问

Detect click outside a component react way NOT dom access

javascript

reactjs

dom

react-state-management