React-Bootstrap NavItem 不触发 onClick 处理程序

Question

当我使用 React-Bootstrap 单击 NavItem 时，我试图调用单击事件处理程序。

我有以下代码：

<Navbar fluid inverse>
            <Navbar.Header>
                <Navbar.Brand>
                    {first} {last}
                </Navbar.Brand>
                <Navbar.Toggle/>
            </Navbar.Header>
            <Navbar.Collapse>
            <Nav>
                {navItems.map(item => {
                    return(
                        <NavItem                           
                        key={item[1]}
                        eventKey={item[1]}
                        onClick={()=> this.handleClick}
                        >
                            {item[0]}
                        </NavItem>
                    );
                })}                  
            </Nav>
            </Navbar.Collapse>
        </Navbar>

以此作为我的点击处理程序：

handleClick(event) {
    event.preventDefault();
    console.log(event);
}

愚蠢的是，这不起作用，但是，当我让 onClick 等于时：

<NavItem                           
  key={item[1]}
  eventKey={item[1]}
  onClick={()=> console.log("Hello")}
  >
  {item[0]}
 </NavItem>

它工作正常，只有当我添加点击处理程序时......有什么想法吗？

Answer 1

问题是您没有调用返回它的函数。替换这一行：

onClick={()=> this.handleClick}

和：

onClick={()=> this.handleClick()}

此外，如果您想访问函数中的事件，则应将其传递给函数：

onClick={e => this.handleClick(e)}

多一点解释

在箭头函数中：

() => this.someFunction

翻译成：

var that = this
function() {
  return that.someFunction
}