Meteor ReactJS why reloading page?

react
1

Im using meteor with react, and i have some links in a component.

im using an event on a link for the click onClick={this.props.onClicked} or onClick={this.onClicked} and on that method I have preventDefault(). But why is clicking on links doing hard reloads on the page?

Any idea?

thanks

2

Are you calling preventDefault on the event argument passed to your handler functions?

onClick(event) {
  event.preventDefault();
  ...
}
3

yes,

onClicked: function(e,t){ e.preventDefault(); }

onClick={this.onClicked}

4

You might have a javascript error and it is why it doesn’t run preventDefault. Have you tried to enable Preserve log in your log console?

5

No errors.

this is what i have <a href={this.props.url} onClick={this.onClicked} data-url={this.props.url}>

together with the onClicked event

onClicked: function(e){ e.stopPropagation(); e.preventDefault(); }

6

Have you set a break point (i.e. debugger) or console.log to make sure your handler is being called?

7

i have a console.log after the event.preventDefault() and its been called.

8

really dont understand.

something so simple… 3 days lost with this…

9

I suspect (haven’t tried) that since you’ve also set href, you might have to return false in the onClick handler function if you don’t want the url to be opened.

10

Just wanted to chime in to say that I’m having this same problem. I’m using the react package with Meteor as described in the official tutorial. Whenever I click on a link in my application, the browser navigates to the link and then triggers the onClick event handler (which has evt.preventDefault()). The handler seems to be called too late.

11

Do you have some code we can copy to reproduce the problem?

12

Heading out right now, but I’ll come back to this. I’m beginning to think that it could be an issue with the router that I’m using (FlowRouter) rather than a core Meteor+React issue (@narven, are you also using FlowRouter or some other router?). preventDefault works fine in my Meteor+React apps that don’t use FlowRouter. On a very quick glance, FlowRouter seems to use page.js, which (on a another very quick glance at its source) seems to add a click handler to the DOM that may be intervening and doing things to the route before my own click handler kicks in.

As I said, though, I’ll have to look into this more seriously when I get back.

13

Yep, in my case, the problem is definitely FlowRouter and/or page.js (a FlowRouter dependency). The page.js click handler captures the click first and ultimately makes the browser proceed to the target of the clicked link, and all of this happens before the React onClick click handler even gets a chance to preventDefault.

14

@jmrog, no i was using Iron Router. Currently I stopped using react, and now Im using FlowRouter.

I haven’t tested anymore that problem.

15

You should try the react-router. I know it’s react specific but it rocks :wink:

16

For what I was doing, the routing needs to be abstracted. Needs to work with all routing packages.

17

I know this is late, but if anyone else is having this problem, you need to make sure the event listener is on the <form> and not the submit <button>

18

Hi all,

I found best [React Router 4 switch introduction video] (https://discuss.reactjs.org/t/intro-to-react-router-4-switch/7078/3). watch it.

Regards,
John, Trainer@ Best ReactJS Online Training in India