На всю жизнь я не могу понять, почему событие щелчка не запускается в моем функциональном компоненте.

Вот мой компонент:

import React, { useState, useEffect } from 'react';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    Nav,
    NavItem,
    NavLink,
} from 'reactstrap';

import classNames from 'classnames';
import img from '../../img/logo/logo-white.svg';

const NavBar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => {
        console.log('toggllling', isOpen);
        setIsOpen(!isOpen);
    };

    return (
        <div
            id="nav-wrap"
            className={classNames({ 'bg-dark-blue': isOpen })}
        >
            <Navbar color="transparent" dark expand="lg" className="container">
                <a className="navbar-brand" href="/">
                    <img alt="logo light" src={img} />
                </a>
                <NavbarToggler onClick={toggle} />
                <Collapse isOpen={isOpen} navbar>
                    <Nav className="navbar-nav" navbar>
                        <NavItem className="active">
                            <NavLink href="/">First</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/">second</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/">Thord</NavLink>
                        </NavItem>
                        <NavItem className="separated">
                            <NavLink href="/">Fourth</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/">fifth</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/" className="btn btn-light">last</NavLink>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>
        </div>
    );
};

export default NavBar;

Это немного более продвинутая версия примера переключения навигационной панели со страницы responsestrap: https: //reactstrap.github .io / components / navbar /.

Из React Devtools я вижу, что событие привязано к правильному компоненту реакции. Если я заменяю toggle чем-то, что должно срабатывать немедленно, например, при вызове функции, оно срабатывает немедленно. Но когда я нажимаю на настоящую кнопку, ничего не происходит. Я даже привязал событие щелчка к документу, чтобы увидеть, не скрыто ли что-то над кнопкой, и вышел из системы, если событие распространяется до правильного элемента - так оно и было. так что, хоть убей, я не могу понять, почему функция переключения никогда не срабатывает и почему я никогда не вижу «переключение» в моей консоли. Я также пробовал добавить этот onClick к любому из других элементов в компоненте - и он никогда не работает нигде внутри компонента.

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

ready(() => {
    // Example:
    const wrap = document.getElementById('nav-wrap');
    if (wrap) {
        // perform element replacement
        const parent = wrap.parentNode;
        const temp = document.createElement('div');
        render(<NavBar element={wrap} />, temp);
        parent.replaceChild(temp.querySelector('div#nav-wrap'), wrap);
    }
});

Редактировать:

Я упростил компонент, и результаты те же - событие не срабатывает. Когда я отлаживаю его с помощью инструментов разработчика браузера и добавляю точку останова при щелчке мыши, я вижу, что вызов функции заканчивается в response-dom.development.js function noop() {} Почему?

0
Odif Yltsaeb 10 Фев 2021 в 19:29

2 ответа

Лучший ответ

Не уверен, насколько полезен этот ответ для населения в целом. Вопросов "неработающих" onClick нет. Моды - если вы не видите здесь ничего для изучения, просто отметьте вопрос для удаления.

Итак, здесь произошло то, что в моем index.js была механика замены реликвий, которая и создала компонент. Я визуализировал компонент внутри элемента не в DOM:

        const temp = document.createElement('div');
        render(<NavBar element={wrap} />, temp);

А затем просмотрел его и заменил его предшественника в чистом HTML на компонент react. Я выбрал это сложное решение, потому что изначально я просто пытался повторно использовать некоторые компоненты. Позже я изменил эту логику, но не стал просто использовать render(<NavBar/>, wrap);, что избавило бы меня от необходимости писать этот вопрос.

Таким образом, моя собственная сложность, которую я не уменьшал вовремя, создавала еще больше накладных расходов и траты времени. Так что да - избегайте сложностей. Вот вам урок.

0
Odif Yltsaeb 11 Фев 2021 в 07:29

Вы пробовали setState с обратным вызовом?

setIsOpen((prevState) => (
  !prevState
));
0
k-wasilewski 10 Фев 2021 в 17:06
66140911