克隆一个 react 的合成事件实例

Question

使用 vanilla JS 可以像这样克隆一个事件实例：

const cloneEvent = event => new event.constructor(event.type, event);

可用于将事件事件从一个 DOM 元素转发到另一个元素。例如，

const buttonA = document.querySelector('#a');
const buttonB = document.querySelector('#a');

const clickHandler = (type, forwardTo) => event => {
  console.log(type, 'was clicked');
  if (forwardTo) forwardTo.dispatchEvent(cloneEvent(event));
};

buttonA.addEventListener('click', clickHandler('A', buttonB));
buttonA.addEventListener('click', clickHandler('B'));

当您单击 A 时，您还将看到两个按钮的 2 个日志记录。

我想用 React 的SyntheticEvent实现同样的效果，但我遇到的问题大概是因为 SyntheticEvent 的实例化方式与本机事件不同。这是说明问题的现场演示：https : //jsfiddle.net/2Lhsfceu/2/（请参阅开发控制台日志）

我目前的解决方案是克隆本机事件 ( SyntheticEvent.nativeEvent) 如下（更新和工作现场演示：https : //jsfiddle.net/2Lhsfceu/1/）

const cloneEvent = event => {
  const nativeEvent = event.nativeEvent || event;
  new nativeEvent.constructor(nativeEvent.type, nativeEvent);
}

我想知道是否有更清洁的方法，或者这是我们能做的最好的方法吗？

我担心的是，通过仅克隆本机事件，代码库正在处理两种不同类型的事件：由源事件（来自 React）调度的 SyntheticEvent 和来自转发的本机事件。

Answer 1

一旦在 DOM 上分派本机事件就像手动滚动一样，就应该没问题了。

我担心的是，通过仅克隆本机事件，代码库正在处理两种不同类型的事件：由源事件（来自 React）调度的 SyntheticEvent 和来自转发的本机事件。

React 所做的是监听根上的所有本机事件（在<div id="#root"/>这里，它们通过冒泡到达那里），然后每次接收到一个事件时，它都会创建一个等效的 SyntheticEvent，并在 React 代码中传递。

因此，如果您手动触发本机事件，React 将像往常一样创建其 SyntheticEvent 等效项，并且应该没问题。

在极少数情况下，在 Javascript 中手动调度事件会产生与真实用户触发事件不同的效果。请参阅此示例。