javascript - React.js——LinkContainer。阻止链接导航

Question

基本上我想做的事情应该很简单:)

我的菜单中有两个链接，Link1 和 Link2。

Link1 有一个复选框。如果未选中任何复选框，我需要阻止导航到 Link2。

在 < Nav > 里面我有这个代码:

 <LinkContainer activeClassName='active'
                       to={{pathname: '/cleanup/manual/' + this.state.ProjectId, query: {productIds: this.state.ProductIDs.join()}}}><NavItem
          eventKey={3} onClick={ this.onNavItemClick }title='Sop'>Link2</NavItem></LinkContainer>

当鼠标悬停时，链接的结构如下(未选中复选框):

http://localhost:3000/#/cleanup/manual/39?productIds=

当我选择了一些复选框时:

http://localhost:3000/#/cleanup/manual/39?productIds=62%2C63

我可以访问该状态，在该状态中我可以查看是否已选择 ProductID，这就是我尝试执行此操作的方法:

handleSelect(event) {   
if (event === 3 && this.state.ProductIDs.length === 0) {
    NotificationManager.warning('Please select some products');
    this.setState({activeKey: 0});
    return;
}



this.setState({activeKey: event});
},

If 语句工作得很好，但它总是导航到 Link2 页面。我怎样才能阻止它导航到那里？

Answer 1

您希望在 onNavItemClick 中使用 e.preventDefault() 来阻止默认功能的发生。