Wexoni Wexoni - 1 year ago 146
React JSX Question

React.js -- LinkContainer. Prevent link from navigating

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


And when I have selected some checkboxes:


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});

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 Source

You want e.preventDefault() in onNavItemClick to prevent the default functionality from occurring.