React-starter-kit: why onClick={anyfunction} is not working, include original code " <a className="Footer-link" href="/" onClick={Link.handleClick}>License</a> ",when click the link, handleClick won't be called. what's wrong? thanks.

Created on 30 Jun 2015 · 6Comments · Source: kriasoft/react-starter-kit

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Source

zhangtiny123

Most helpful comment

@zhangtiny123, @sethmcleod if you don't want to use Link component for links with client-side redirects, you can handle onClick event manually, something like this:

import React from 'react';
import history from '../core/history';

// Cancel defualt onClick handler (redirect causing full-page refresh)
// and handle the redirect by using HTML5 History API instead
function handleClick(event) {
  event.preventDefault();
  history.push(event.target.getAttribute('href'));
}

function MyComponent() {
  return (
    <div>
      <a href="/path" onClick={handleClick}>Click me</a>
    </div>
  );
}

export default MyComponent;

In the latest version of RSK, the handelClick method is not static (cannot be used outside the context of the Link component. I think it might be a good idea to introduce the static Link.handleClick method the way it worked before. A PR with this fix is welcome!

koistya on 13 Oct 2016

🎉1 👍1

All 6 comments

I'm running in to this same issue, can't get any onClick events to work..

sethmcleod on 18 May 2016

@zhangtiny123 You are going insane, right? :relaxed: Hey this is not reason for making so stupid title and no description of your problem.
You are on start with your trying, aren't you? Can you commit your work in your fork of RSK in some nicely named branch ;-) and give link to diff here? I can help you then..

langpavel on 18 May 2016

🎉1 👍1

@zhangtiny123, @sethmcleod if you don't want to use Link component for links with client-side redirects, you can handle onClick event manually, something like this:

import React from 'react';
import history from '../core/history';

// Cancel defualt onClick handler (redirect causing full-page refresh)
// and handle the redirect by using HTML5 History API instead
function handleClick(event) {
  event.preventDefault();
  history.push(event.target.getAttribute('href'));
}

function MyComponent() {
  return (
    <div>
      <a href="/path" onClick={handleClick}>Click me</a>
    </div>
  );
}

export default MyComponent;

koistya on 13 Oct 2016

🎉1 👍1

Was there ever an answer for this. I'm trying to test an onclick event for the Link component and nothing happens?

I've just made a small edit to Header.js to keep it simple.

``<Link className={s.brand} to="/" onClick={this.testClick}> <img src={logoUrl} srcSet={${logoUrl2x} 2x`} width="38" height="38" alt="React" />

````

kurtfoster on 26 May 2017

@kurtsalsa Can you show more of your code?

Most one gotcha is when you use this inside your testClick handler, but React is calling your handler without bound context.
Another trouble is when you open localhost:3000 instead of localhost:3001, then client-side scripts are not loaded in development
The last one is when your javascript fail only on client, then your app works purely from server, similar to previous situation

langpavel on 26 May 2017

Thx @langpavel. Running on 3001 fixed the issue. Is there somewhere in the docs that explains why port 3000 doesn't work? Sorry if that's a dumb question, I'm new to React and still learning as I go.

kurtfoster on 27 May 2017

Was this page helpful?

0 / 5 - 0 ratings