复制react合成事件的实例
使用vanilla，可以克隆这样的事件实例：
const cloneEvent = event => new event.constructor(event.type, event);可用于将事件事件从一个DOM元素转发到另一个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/ (参见dev控制台日志)
我目前的解决方案是克隆本机事件(SyntheticEvent.nativeEvent)，如下所示(更新和工作现场演示：https://jsfiddle.net/2Lhsfceu/1/)
const cloneEvent = event => {
const nativeEvent = event.nativeEvent || event;
new nativeEvent.constructor(nativeEvent.type, nativeEvent);
}，我想知道是否有一种更清洁的方法，或者这是我们所能做的最好的？
我担心的是，仅通过克隆本机事件，代码库将处理两种不同类型的事件:由源事件(来自React)分派的SyntheticEvent和来自转发的本机事件。
回答 1
Stack Overflow用户
发布于 2022-07-26 11:54:56
一旦在DOM上分配本机事件就像手动滚动一样，就应该可以了。
我担心的是，仅通过克隆本机事件，代码库将处理两种不同类型的事件:由源事件(来自React)分派的SyntheticEvent和来自转发的本机事件。
React所做的是侦听根上的所有本机事件(此处的<div id="#root"/>，它们通过冒泡到达那里)，然后每次接收到事件时，它都会创建一个等效的SyntheticEvent，然后在React代码中传递。
因此，如果您手动触发本机事件，那么React将像往常一样创建它们的SyntheticEvent等价物，这应该是很好的。
在非常罕见的情况下，在Javascript中手动发送事件将与让真正的用户触发事件有不同的效果。见这个例子。
https://stackoverflow.com/questions/53211240
复制相似问题
腾讯云开发者
