如何在 React 中动态附加事件？

Question

我在 React 中有一个 Window（一个 div），我想调整它的大小。使用 onMouseDown={this.handleMouseDown} 接口我可以实现它，但问题是这些处理程序只会在我留在 div 内时被调用。

调整元素大小时，通常会将光标移到 div 之外，以表示您希望它变大。因此，我想在 onMouseDown 事件中为 onMouseMove 附加一个全局侦听器，以便实现这一点。

我该怎么做，或者有更好的方法吗？

Answer 1

是的，将事件处理程序附加到 window 的 onmousemove 和 onmouseup（分离动态添加的事件处理程序）事件效果很好，然后即使鼠标移到 [=15= 之外，事件也会触发].

在 React 的 onmousedown 事件中使用 addEventListener 很容易做到。

Answer 2

当前接受的答案建议您破解 React 的解决方案（使用 jQuery 或其他库）。其中一条评论提到您可以通过 DOM 操作（仍然在 React 之外）来做到这一点。

虽然在技术上是正确的，但我想提出一个更好的方法。您已经在使用 React，因此与其对抗框架，不如尝试拥抱它并在其中思考解决方案。
（注意：这个解决方案有一个限制——如果光标离开浏览器window，MouseMove事件将被中断。如果你需要即使在这种情况下也能够捕获事件，然后考虑其他答案）

所以你有你想要调整大小的 window React 组件。它存在于其他 div 中，我们称它为 windowContainer.

将 windowContainer 作为 React 组件实施。
windowContainer 可以有一个描述 window 帧的状态（我们称之为 windowFrame）。
在 window 中定义一个 onMouseDown（大概在某些 handle UI 元素中）告诉 windowContainer 应该开始调整大小。
在windowContainer里面，在onMouseMove中你可以计算鼠标位置的变化和刷新状态的windowFrame。您的 window 将采用新框架。
同样在 windowContainer 中，您可以检测到 onMouseUp，此时您将断开 onMouseMove 事件。

一些可能有助于希望实施此解决方案的人的附加信息：

当我说 'connect' / 'disconnect' onMouseMove 事件监听器时，你需要以 React 声明的方式来思考这个。因此，例如，方法是让一个状态属性称为 isResizingWindow，然后在 render() 块中你有类似的东西：

<div onMouseMove={  this.state.isResizingWindow  ?  (event) => this.handle_onMouseMove(event) : undefined } </div>

还要确保您使用的是 React 事件，而不是 DOM 事件。特别是如果使用 TypeScript，请确保您的定义如下所示：

handle_onMouseMove(event: React.MouseEvent<HTMLDivElement>)
{
    // Here is where the frame calculation and setState goes
}

How can I dynamically attach an event in React?