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

Question

我正在使用ReactJS和它的SyntheticEvent来跟踪事件,它是目标DOM节点.

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

如何实例化SyntheticEvent并为它们分配DOM及其目标值？

Answer 1

我创建了一个辅助函数来从事件生成 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}）来触发事件的“经典”方式。

Answer 2

在你的组件返回的 JSX 中你可以添加这样的东西

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

在您的组件中声明 myEventHandlerFunc: function(e){} 并执行您的操作:)

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

编辑：

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

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

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

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