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

Question

Basically what I want to do should be simple :)

I have a two links in the menu, Link1 and Link2.

Link1 has a checkboxes. If no checkbox is selected I need to prevent navigation to Link2.

Inside < Nav > I have this code:

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

When hovered with the mouse, the link is structured like this (no checkbox selected):

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

And when I have selected some checkboxes:

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

I have access to the state where I can see if I have and ProductIDs selected, and this is how I tried to do it:

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 statement works just fine, but it always navigates to the Link2 page. How can I prevent it from navigating there?

Answer 1

您希望在onNavItemClick e.preventDefault()来防止发生默认功能。