Wexoni Wexoni - 3 months ago 35
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):

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

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