Tengo este código React muy simple:
const onSelectTournament = (e) => { console.log(e); };Y este HTML:
<div onClick={onSelectTournament}></div> Pero en la consola, en lugar de obtener el objeto Event , obtengo este objeto infernal:
SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: div.tournamentsBoxDescription, …} altKey: false bubbles: true button: 0 buttons: 0 cancelable: true clientX: 382 clientY: 269 ctrlKey: false currentTarget: null defaultPrevented: false detail: 1 eventPhase: 3 getModifierState: ƒ modifierStateGetter(keyArg) isDefaultPrevented: ƒ functionThatReturnsFalse() isPropagationStopped: ƒ functionThatReturnsFalse() isTrusted: true metaKey: false movementX: 0 movementY: 0 nativeEvent: PointerEvent {isTrusted: true, delegateTarget: document, pointerId: 1, width: 1, height: 1, …} pageX: 382 pageY: 269 relatedTarget: null screenX: 382 screenY: 373 shiftKey: false target: div.tournamentsBoxDescription timeStamp: 102788.7999997139 type: "click" view: Window {window: Window, self: Window, document: document, name: '', location: Location, …} _reactName: "onClick" _targetInst: null [[Prototype]]: Object¿Puede ayudarme alguien? Realmente lo aprecio.
SyntheticEvent es un objeto que envuelve el Event nativo en React, le brinda las mismas funcionalidades y más, como asegurarse de que tenga el mismo comportamiento en todos los navegadores.
Puede obtener el Event nativo accediendo al atributo nativeEvent de SyntheticEvent , así:
e.nativeEventPuedes consultar la documentación si quieres saber más al respecto.
Asegúrese de no llamar a una función dos veces al mismo tiempo. Tuve un desafío similar, resultó que estaba llamando a la misma función desde un solo formulario al mismo tiempo.