Question

使用香草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时，两个按钮的日志也将记录两次。

我想用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和来自转发的本机事件。

克隆react的合成事件的实例

0 个答案: