Не вижу подключенную функцию события, но noop

#javascript #reactjs #onclick #dom-events

#javascript #reactjs #onclick #dom-события

Вопрос:

Проблема в том, что, хотя я прикрепил события (например handleClear ) в классе ниже, однако, когда я проверяю onClick событие в кнопке dom, вместо этого отображается пустой метод noop() {} . В результате он не может быть очищен, как ожидалось.

Странно то, что иногда, если я устанавливаю точки останова, метод обработчика будет там. Я подозреваю, что вложение события связано со временем. Но я не могу определить, когда и где он пропускает прикрепление функции события. Кто-нибудь может дать несколько советов по решению этой проблемы? Или предоставить некоторые идеи?

 class ClearHistory extends PureComponent {

    handleCancel = () => {
        console.log('handleCancel');
    }

    handleClear = (event) => {
        console.log('handleClear');
    }

    render() {

        return (
            <div>
                <Button key='cancel' type='button' onClick={this.handleCancel} >
                    Cancel
                </Button>
                <Button key='remove' type='button' onClick={this.handleClear} >
                    Clear
                </Button>
            </div>
        );
    }
}
 

Ответ №1:

Я создал песочницу для тестирования вашего компонента и переименовал в html-тег, потому что компонент без какой-либо библиотеки пользовательского интерфейса.

введите описание изображения здесь

https://codesandbox.io/s/clearhistory-fq69b?file=/src/ClearHistory.js

введите описание изображения здесь

Это работает, но:

введите описание изображения здесь

Это нормально, потому что сам react заботится о привязке события.

введите описание изображения здесь

https://the-guild.dev/blog/react-dom-event-handling-system

Комментарии:

1. Привет @Daniil, спасибо за создание изолированной среды, а также за прикрепление документа! Это помогает мне понять, почему существует функция noop.

2. Однако по какой-то причине он по-прежнему не работает для меня в моем локальном проекте, где метод очистки истории не выполняется при нажатии. Я попытался проверить свойство react DOM и увидеть, что метод event был назначен событию onclick, но он просто ничего не запускает.

3. @HaoyuChen, проверьте свою консоль на наличие ошибок

4. да, я проверил, но он ничего не регистрирует, когда я нажимаю кнопку. Потому что иногда, когда я устанавливаю точки останова, после щелчка отображается журнал. Мне интересно, могу ли я каким-либо образом узнать, какой код был вызван после нажатия.

5. если вы не видели никаких ошибок и журналов, я думаю, что код не был вызван. Можете ли вы поделиться репозиторием github с проектом? Возможно, проблема в другом.