onClick 事件未在功能元素上触发

Question

我一直无法理解为什么我的功能组件中没有触发点击事件。

这是我的组件：

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;

它是来自 reactstrap 页面的导航栏切换示例的更高级版本：https://reactstrap.github.io/components/navbar/

我可以从 React Devtools 中看到事件绑定到正确的 React 组件。如果我将 toggle 替换为应该像函数调用一样立即触发的东西，那么它会立即触发。然而，当我点击实际按钮时，什么也没有发生。我什至将点击事件绑定到文档，以查看按钮上方是否隐藏了某些东西，如果事件向下传播到正确的元素，我就会注销 - 它做到了。所以对于我的生活，我无法弄清楚为什么切换功能永远不会触发以及为什么我从来没有在我的控制台中看到 'toggllling' 。我也尝试将此 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);
    }
});

编辑：

我简化了组件，结果是一样的 - 事件没有触发。当我使用浏览器 devtools 调试它并在鼠标单击时添加断点时，我可以看到函数调用以 react-dom.development.js function noop() {} 结束，这是为什么？

Answer 1

您是否尝试过 setState 回调？

setIsOpen((prevState) => (
  !prevState
));

Answer 2

不确定这个答案对一般人群有多大用处。没有 onClick“不工作”的问题。模组 - 如果您在这里看不到任何要学习的内容，请将问题标记为删除。

所以这里发生的事情是我的 index.js 中有一个遗物替换机制，它创建了组件。我在不在 DOM:

中渲染了元素内部的组件

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

然后查找并用 React 组件替换了其纯粹的 HTML 前身。我选择了这个复杂的解决方案，因为最初，我只是尝试重用一些组件。后来我改变了这个逻辑，但没有回到只用render(<NavBar/>, wrap);，这样就省去了我写这道题的麻烦

所以我自己的复杂性，我没有按时减少，造成了更多的开销和浪费的时间。所以是的 - 避免复杂性。这就是教训。

onClick 事件未在功能元素上触发

onClick event not firing on functional element

reactjs

reactstrap

react-functional-component