React.js——LinkContainer.阻止链接导航

React.js -- LinkContainer. Prevent link from navigating

本文关键字：链接 导航 LinkContainer js React      更新时间：2023-09-26

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

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

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

& lt;我有这样的代码:

 <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页面。我怎样才能阻止它导航到那里呢?

您希望onNavItemClick中的e.preventDefault()能够阻止默认功能的发生

相关文章：