克隆 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实现同样的目的，但我遇到了一些问题，可能是因为SyntheticEvents的实例化方式与本机事件不同。下面是一个演示，说明了这个问题：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手动调度事件会产生与由真实用户触发事件不同的效果。请参见此示例。