React onClick and preventDefault link refresh redirect

Question

I m rendering a link with react   render  - gt      lt a className  upvotes  onClick  this upvote  gt upvote lt  a gt     Then  above I have the upvote function   upvote  - gt       do stuff  ajax    Before link I had span in that place but I need to switch to link and here s the trouble - every time I click on  upvotes the page gets refreshed  what I ve tried so far   event preventDefault   - not working   upvote   e  - gt    e preventDefault        do stuff  ajax    event stopPropagation   - not working   upvote   e  - gt    e stopPropagation        do stuff  ajax    return false - not working   upvote   e  - gt       do stuff  ajax    return false   I ve also tried all of the above using jQuery in my index html  but nothing seems to work  What should I do here and what I m doing wrong  I ve checked event type and it s click so I guess I should be able to avoid redirect somehow   Excuse me  I m a rookie when it comes to React   Thank you

User · Accepted Answer

React events are actually Synthetic Events, not Native Events. As it is written here:

Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops.

Try to use Use Event.stopImmediatePropagation:

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();

User · Answer

none of these methods worked for me  so I just solved this with CSS    upvotes before      content        float  left     width  100      height  100      position  absolute     left  0     top  0

User · Answer

A nice and simple option that worked for me was    lt a href  javascript  false  onClick  this handlerName  gt Click Me lt  a gt

User · Answer

just like pure js do preventdefault   in class you should like this create a handler method   handler event        event preventDefault        console log event

User · Answer

I didn t find any of the mentioned options to be correct or work for me when I came to this page  They did give me ideas to test things out and I found that this worked for me   dontGoToLink e      e preventDefault        render       return   lt a href  test com  onClick  this dontGoToLink    gt

User · Answer

If you are using React Router  I d suggest looking into the react-router-bootstrap library which has a handy component LinkContainer  This component prevents default page reload so you don t have to deal with the event   In your case it could look something like   import   LinkContainer   from  react-router-bootstrap     lt LinkContainer to  givePathHere  gt       lt span className  upvotes  onClick  this upvote  gt upvote lt  span gt   lt  LinkContainer gt

User · Answer

render  -     lt a className  upvotes  onClick   e    gt   this upvote e      gt upvote lt  a gt

User · Answer

try bind this  so your code looks like below --    lt a className  upvotes  onClick  this upvote bind this   gt upvote lt  a gt    or if you are writing in es6 react component in constructor you could do this  constructor props      super props      this upvote   this upvote bind this      upvote e        function upvote    e preventDefault       return false

User · Answer

The Gist I found and works for me   const DummyLink     onClick  children  props     gt         lt a href     onClick  evt   gt            evt preventDefault            onClick  amp  amp  onClick               props  gt           children       lt  a gt       Credit for srph https   gist github com srph 020b5c02dd489f30bfc59138b7c39b53

User · Answer

A full version of the solution will be wrapping the method upvotes inside onClick  passing e and use native e preventDefault     upvotes    e  arg1  arg2  arg3     gt        e preventDefault          do something       render        return   lt a type  simpleQuery  onClick   e   gt  this upvotes e  arg1  arg2  arg3    gt        upvote      lt  a gt

User · Answer

This is because those handlers do not preserve scope  From react documentation  react documentation  Check the  no autobinding  section  You should write the handler like  onClick

User · Answer

If you use checkbox   lt input      type  checkbox      onChange  this checkboxHandler    gt    stopPropagation and stopImmediatePropagation won t be working   Because you must using onClick  this checkboxHandler

User · Answer

In a context like this  function ActionLink       function handleClick e        e preventDefault        console log  The link was clicked            return        lt a href     onClick  handleClick  gt        Click me      lt  a gt           As you can see  you have to call preventDefault   explicitly  I think that this docs  could be helpful

User · Answer

I ve had some troubles with anchor tags and preventDefault in the past and I always forget what I m doing wrong  so here s what I figured out   The problem I often have is that I try to access the component s attributes by destructuring them directly as with other React components  This will not work  the page will reload  even with e preventDefault     function  e    href        e preventDefault         Do something with href        lt a href   foobar  onClick  clickHndl  gt Go to Foobar lt  a gt    It seems the destructuring causes an error  Cannot read property  href  of undefined  that is not displayed to the console  probably due to the page complete reload  Since the function is in error  the preventDefault doesn t get called  If the href is    the error is displayed properly since there s no actual reload   I understand now that I can only access attributes as a second handler argument on custom React components  not on native HTML tags  So of course  to access an HTML tag attribute in an event  this would be the way   function  e      e preventDefault      const   href     e target       Do something with href        lt a href   foobar  onClick  clickHndl  gt Go to Foobar lt  a gt    I hope this helps other people like me puzzled by not shown errors

[reactjs] React onClick and preventDefault() link refresh/redirect?

Examples related to reactjs

Examples related to hyperlink

Examples related to coffeescript

Examples related to preventdefault