使用 React 时获取 SyntheticBaseEvent 对象而不是简单的 Event

Question

我有这个非常简单的 React 代码：

\n

const onSelectTournament = (e) => {\n    console.log(e);\n};\n

\n

还有这个 HTML：

\n

<div onClick={onSelectTournament}></div>\n

\n

但在控制台上，我没有获取对象，而是Event得到了这个地狱对象：

\n

    SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: div.tournamentsBoxDescription, \xe2\x80\xa6}\naltKey: false\nbubbles: true\nbutton: 0\nbuttons: 0\ncancelable: true\nclientX: 382\nclientY: 269\nctrlKey: false\ncurrentTarget: null\ndefaultPrevented: false\ndetail: 1\neventPhase: 3\ngetModifierState: \xc6\x92 modifierStateGetter(keyArg)\nisDefaultPrevented: \xc6\x92 functionThatReturnsFalse()\nisPropagationStopped: \xc6\x92 functionThatReturnsFalse()\nisTrusted: true\nmetaKey: false\nmovementX: 0\nmovementY: 0\nnativeEvent: PointerEvent {isTrusted: true, delegateTarget: document, pointerId: 1, width: 1, height: 1, \xe2\x80\xa6}\npageX: 382\npageY: 269\nrelatedTarget: null\nscreenX: 382\nscreenY: 373\nshiftKey: false\ntarget: div.tournamentsBoxDescription\ntimeStamp: 102788.7999997139\ntype: "click"\nview: Window {window: Window, self: Window, document: document, name: '', location: Location, \xe2\x80\xa6}\n_reactName: "onClick"\n_targetInst: null\n[[Prototype]]: Object\n

\n

有人可以帮助我吗？\n我真的很感激。

\n

Answer 1

SyntheticEvent是一个在 React 中包装原生的对象Event，它为您提供相同的功能以及更多功能，例如确保跨浏览器具有相同的行为。

您可以Event通过访问nativeEvent以下属性来获取本机SyntheticEvent：

e.nativeEvent

如果您想了解更多信息，可以查看文档。