我创建了一个辅助函数来从 Event 生成 SyntheticEvent：

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，您可以尝试addEventListener在元素的引用上使用本机的任何方式。
Ps 如果您找到了可以为您的问题提供解决方案的 API，请与我们分享 :)

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

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

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

希望这有帮助......我现在开始用谷歌搜索来寻找一些额外的例子；）

编辑：

如果您想触发自定义事件，您也可以仅使用 JQuery 并在生命周期事件 componentDidMount 上绑定这些事件。在这里你可以做这样的事情：

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

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

$(document).trigger('myCrazyEvent', [customVar]);