Почему event.preventDefault undefined?

Question

[Владимир Голубь]

Разбираюсь с чужим кодом.
Наткнулся на такое:

Код компонента:

import React, { Component } from 'react';

export default class TabSwitchItem extends Component {

    constructor(props) {
        super(props);
    }

    clickHandler = (a, event) => {
        console.log(a);
        console.log(event);
        console.log(event.preventDefault());
    };

    let { item } = this.props;

    render() {

        const result = <a onClick={() => this.clickHandler('1', event)}>{item.title}</a>;

        return (
            <React.Fragment>
                { result }
            </React.Fragment>
        )
    }
}

Результат:

1

MouseEvent {isTrusted: true, screenX: 1771, screenY: 192, clientX: 1771, clientY: 58, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 1771
clientY: 58
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 80
layerY: 21
metaKey: false
movementX: 0
movementY: 0
offsetX: 81
offsetY: 22
pageX: 1771
pageY: 245
altKey: falsebubbles: truebutton: 0buttons: 0cancelBubble: falsecancelable: trueclientX: 1771clientY: 58composed: truectrlKey: falsecurrentTarget: nulldefaultPrevented: truedetail: 1eventPhase: 0fromElement: nullisTrusted: truelayerX: 80layerY: 21metaKey: falsemovementX: 0movementY: 0offsetX: 81offsetY: 22pageX: 1771pageY: 245path: (22) [a.b-tabs-header__item, div.b-tabs-header__item-wrap, div.b-tabs-header__items-list, div.b-tabs-header__wrapper, div.b-tabs-header.b-tabs-header_adapt_default.b-tabs-header_theme_folder, div.b-map-data__tabs-header, div.b-map-data__wrapper, div.b-map-data.b-map-data_adapt_default, div.b-map__map-data, div.b-map__info-block, div.b-map__wrapper, div.b-map.b-map_adapt_default.js-init, div.page__map, div.page__map-block, div.page__container.page__container_map, main.page__main-holder, div.page__main-content-wrap, div#root, body.page, html.pp-mod_support_spam, document, Window]relatedTarget: nullreturnValue: falsescreenX: 1771screenY: 192shiftKey: falsesourceCapabilities: InputDeviceCapabilitiesfiresTouchEvents: false__proto__: InputDeviceCapabilitiessrcElement: a.b-tabs-header__itemtarget: a.b-tabs-header__itemtimeStamp: 4215.439999999944toElement: a.b-tabs-header__itemtype: "click"view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}which: 1x: 1771y: 58__proto__: MouseEvent
TabSwitchItem.js:12

undefined

То есть отсутствует event.preventDefault().

Answer 1

[Антон Спирин]

1.

const result = <a onClick={event => this.clickHandler('1', event)}>{item.title}</a>;

2. Вызов event.preventDefault() ничего не возвращает. Другими словами, в консоли и должно быть undefined.

Comments

[Владимир Голубь]

Все равно нет:

c {dispatchConfig: {…}, _targetInst: Ue, nativeEvent: MouseEvent, type: "click", target: a.b-tabs-header__item, …}
altKey: null
bubbles: null
button: null
buttons: null
cancelable: null
clientX: null
clientY: null
ctrlKey: null
currentTarget: null
defaultPrevented: null
detail: null
dispatchConfig: null
eventPhase: null
getModifierState: null
isDefaultPrevented: ƒ gb()
isPropagationStopped: ƒ gb()
isTrusted: null
metaKey: null
movementX: null
movementY: null
nativeEvent: null
pageX: null
pageY: null
relatedTarget: null
screenX: null
screenY: null
shiftKey: null
target: null
timeStamp: null
type: null
view: null
_dispatchInstances: null
_dispatchListeners: null
_targetInst: null
__proto__: c

[Антон Спирин]

Владимир Голубь, вам бы для начала с основами JavaScript разобраться. Вызов preventDefault() - ничего не возвращает.

[Владимир Голубь]

Антон Спирин, Спасибо, все заработало. Скидывал объект event, потому что там даже после передачи свойства в функцию не было preventDefault

[Владимир]

Внимательно прочитайте
https://dev.to/xnimorz/dealing-with-event-handlers...
Обратите внимание на этот абзац

When we declare callback as onClick={this.fetchUsers} every render call will pass the same onClick reference to the button.
At the time, when we use onClick={() => this.fetchUsers()} each render call will init new function () => this.fetchUsers() and will pass it to the button onClick prop. It means, that nextProp.onClick and prop.onClick won't be equal and even if we use a PureComponent instead of button it will be re-rendered.

[Антон Спирин]

Владимир, да это-то понятно. Но в перерасчете ссылки нет ничего криминального, если есть необходимость передавать id, скажем в цикле. Другое дело, что код автора, мягко говоря, бессмысленный. Он с таким же успехом может использовать свою единичку напрямую в хандлере:

clickHandler = e => {
  console.log('1');
  console.log(e);
  console.log(e.preventDefault());
};

и вызывать:
<a onClick={this.clickHandler}>{item.title}</a>