javascript - 克隆一个 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 的实例化方式与 native 事件不同。这是一个演示问题的现场演示: https://jsfiddle.net/2Lhsfceu/2/ (查看开发控制台日志)

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

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

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

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

Answer 1

只要在 DOM 上调度 native 事件就像手动滚动一样，应该没问题。

My concern is that by cloning only the native event the code base is dealing with two different types of events: the SyntheticEvent dispatched by the source event (coming from React) and the native event from forwarding.

React 所做的是它监听根上的所有 native 事件(这里是 <div id="#root"/>，它们通过冒泡到达那里)，然后每次接收到一个，它都会创建一个等效的 SyntheticEvent 并在 React 代码中传递。
所以如果你手动触发原生事件，React 会像往常一样创建它们的 SyntheticEvent 等价物，应该没问题。
在极少数情况下，在 Javascript 中手动调度事件与让真实用户触发事件的效果不同。见 this example .