Reactjs React引导程序NavItem未触发onClick处理程序

当我使用React引导单击NavItem时，我试图调用click事件处理程序

我有以下代码：

<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>

愚蠢的是，当我的onClick等于

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

它工作得很好，只有当我添加点击处理程序。。。有什么想法吗？

应该是onClick={=>this.handleClick}。在您的例子中，在=>函数中有this.handleClick。所以onClick正在执行=>，但是在这个函数体中this.handleClick只是函数对象，它不会被执行，因为您没有使用调用它

我建议执行onClick={this.handleClick.bindthis}，原因是。

问题是您没有调用函数，而是返回了它。 替换此行：

onClick={()=> this.handleClick}

与：

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

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

再解释一下 在arrow函数中：

() => this.someFunction

翻译为：

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

---

令人惊叹的这起作用了。谢谢你的额外费用explanation@bflynnigan那你为什么不把它标为正确答案呢DI想，但我只能将一个答案标记为正确答案，而在你发布正确答案之前发布的那个人：

() => this.someFunction

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