克隆一個反應的合成事件的實例

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 中手動調度事件與讓真實用戶觸發事件的效果不同。 請參閱此示例。