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>

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

Answer 1

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

onClick={()=> this.handleClick}

具有：

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

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

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

更多解释

箭头功能如下：

() => this.someFunction

翻译为：

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

Answer 2

应为onClick={()=> this.handleClick() }。在您的情况下，您在this.handleClick函数中有() => ()。因此onClick正在执行() => ()，但是在此函数的主体this.handleClick中只是函数对象，由于您未使用()进行调用，因此未得到执行

出于performance的原因，我建议您进行onClick={this.handleClick.bind(this)}。

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

2 个答案:

更多解释