React-Bootstrap的NavItem无法触发onClick处理程序

Question

我想在使用React-Bootstrap时，通过点击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>

使用这个作为我的点击处理程序：

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

我觉得很奇怪的是，这个方法不起作用，但是当我将onClick设置为以下内容时：

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

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

- bflynnigan

Answer 1

问题在于，您没有调用该函数，而是返回了它。 替换这一行：

onClick={()=> this.handleClick}

使用：

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

如果您想在函数中访问事件，您需要将其传递给您的函数：

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

---

更详细的解释

在箭头函数中，this：

() => this.someFunction

翻译成：

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

- Soorena

---

太棒了！这个方法起作用了。谢谢你额外的解释。 - undefined

@bflynnigan，为什么你没有将它标记为正确答案呢？:D - undefined

我本想这样做，但我只能标记一个答案为正确答案，而在你之前发布的那个人也回答得很正确 :( - undefined

Answer 2

应该这样写：onClick={() => this.handleClick()}。在您的案例中，您在() => ()函数内部使用了this.handleClick。因此，onClick正在执行() => ()，但在此函数体内，this.handleClick只是函数对象，它没有被执行，因为您没有使用()调用它。

出于性能原因，我建议使用onClick={this.handleClick.bind(this)}。

- Arup Rakshit