ReactJS:我可以创建自己的SyntheticEvent吗?

ReactJS: Can I create my own SyntheticEvent?

本文关键字：SyntheticEvent 自己的 创建 我可以 ReactJS      更新时间：2023-09-26

我正在使用ReactJS，它是SyntheticEvent来跟踪事件，它是目标DOM节点。

我正在创建一些可变组件，我希望它们触发 SyntheticEvent 来跟踪 DOM 并使用 e.target 和 e.target.value 跟踪更改的值。

如何实例化合成事件并为其分配 DOM 及其目标值？

我创建了一个辅助函数来从事件制作合成事件：

export const createSyntheticEvent = <T extends Element, E extends Event>(event: E): React.SyntheticEvent<T, E> => {
  let isDefaultPrevented = false;
  let isPropagationStopped = false;
  const preventDefault = () => {
    isDefaultPrevented = true;
    event.preventDefault();
  }
  const stopPropagation = () => {
    isPropagationStopped = true;
    event.stopPropagation();
  }
  return {
    nativeEvent: event,
    currentTarget: event.currentTarget as EventTarget & T,
    target: event.target as EventTarget & T,
    bubbles: event.bubbles,
    cancelable: event.cancelable,
    defaultPrevented: event.defaultPrevented,
    eventPhase: event.eventPhase,
    isTrusted: event.isTrusted,
    preventDefault,
    isDefaultPrevented: () => isDefaultPrevented,
    stopPropagation,
    isPropagationStopped: () => isPropagationStopped,
    persist: () => {},
    timeStamp: event.timeStamp,
    type: event.type,
  };
}

这是我如何使用它的一个例子。我需要触发一个更改事件，为目标提供新的价值。你可以像这样使用它：

const target = document.createElement('input');
target.value = newValue;
const event = new Event('change', { bubbles: true });
Object.defineProperty(event, 'target', { writable: false, value: target })
const syntheticEvent = createSyntheticEvent(event) as React.ChangeEvent<typeof target>;
onChange(syntheticEvent);

话虽如此，还请考虑通过创建new Event并将其调度到 HTML 元素（您可以使用 inputRef.current ，其中 inputRef 定义为 inputRef = useRef() 并用作 <input ref={inputRef} ）。

在当前状态中，我没有寻找有关 SyntethicEvent 的所有资源以确保并且没有找到用于创建新 SyntethicEvent 的 API，您可以尝试在元素的 ref 上使用本机addEventListener。
附言：如果您找到了为您的问题提供解决方案的API，请与我们分享:)

在组件返回的 JSX 中，您可以添加如下内容

<button onClick={this.myEventHandlerFunc}>button text</button>

在你的组件中声明 myEventHandlerFunc： function（e）{} 并:)做你的事情

希望这有帮助...我现在开始谷歌搜索一些额外的例子;)

编辑：

如果你想触发自定义事件，你也可以使用JQuery，并在生命周期事件组件DidMount上绑定这些事件。 在这里，您可以执行以下操作：

$(document).on('myCrazyEvent', this.componentEvtHandler)

在其他地方，您可以创建和分发这样的事件 

$(document).trigger('myCrazyEvent', [customVar]);
相关文章：