克隆一个反应的合成事件的实例

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 会像往常一样创建它们的 SyntheticEvent 等价物，应该没问题。

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