Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-router Link component prevent default for child

I'm trying to place an onClick handler on Link child. The problem is it is not firing because of Link's transition method. Is there any preventDefault or so? Here's the example in jquery world how to stop redirection of parent href tag when clicked on child div?

like image 273
Alex Berdyshev Avatar asked Jan 27 '16 16:01

Alex Berdyshev


People also ask

How can we prevent default behavior in React?

We can prevent this default behaviour by making a small modification to the definition of the handleSubmit function. We call a preventDefault on the event when submitting the form, and this will cancel the default event behavior (browser refresh) while allowing us to execute any code we write inside handleSubmit.

How do you prevent people from going back in React Dom router?

Using componentDidUpdate method of React page lifecycle, you can handled or disabled go back functionality in browser. basically componentDidUpdate method will call automatocally when component got updated. so once your component is updated you can prevent to go back as below.

How do I stop onClick default in React?

The onClick handler allows you to pass a function to a component, which will be executed when it's clicked. Call e. preventDefault() to prevent native default behavior, like submitting a form.

What is preventDefault () in React?

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form. Clicking on a link, prevent the link from following the URL.


1 Answers

From the onClick docs:

A custom handler for the click event. Works just like a handler on an a tag - calling e.preventDefault() will prevent the transition from firing, while e.stopPropagation() will prevent the event from bubbling.

So you should just be able to use e.preventDefault

https://github.com/rackt/react-router/blob/master/docs/API.md#onclicke

like image 191
taylorc93 Avatar answered Sep 29 '22 23:09

taylorc93