href with onClick in ReactJS

Question

As per Reactjs.org to handle event and prevent default use below code:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

However, this also requires to add binding in constructor like:

this.handleClick = this.handleClick.bind(this);

I was able to get desired behaviour by below code:

<span>
  <a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>

Question: Which one is better option? It seems first one requires to use stateful component and second option can do the things irrespective of component being stateful or stateless.

The second has a flaw similar to doing onClick={this.handleClick.bind(this)} in the first, where a new function is created on each render. — Steve Buzonas
– Steve Buzonas, Commented Sep 2, 2017 at 21:07

Meysam Izadmehr · Accepted Answer · 2019-12-05 17:55:32Z

42

Both options produce almost the same result. Since ActionLink is a stateless component, handleClick will be re-created and onClick reallocated. If you want to get the best performance, you can use a class, something like this:

class ActionLink extends React.Component () {
  handleClick = (e) => {
    e.preventDefault();
    console.log('The link was clicked.');
  };

  render() {
    return (
      <a href="#" onClick={this.handleClick}>
        Click me
      </a>
    );
  }
}

In this example. the handleClick is bound only once, and only the render method will be executed. You can also bind the handleClick in the constructor if you prefer. But the differences are so small that I would suggest you use the one you prefer and you find it clearer.

edited Dec 5, 2019 at 17:55

Meysam Izadmehr

3,2601 gold badge19 silver badges25 bronze badges

answered Mar 23, 2017 at 0:00

Vincent D'amour

3,9131 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K.Nicholas Over a year ago

React gives a warning that href="#" "requires a valid value to be accessible."

Anderson Bressane · Accepted Answer · 2020-08-06 16:58:27Z

7

In my case, if i had href="#" i was being redirected anyway, so i left my link/button like this:

<a href="" role="button" onClick={this.myAction}>Click here</a>

answered Aug 6, 2020 at 16:58

Anderson Bressane

4261 gold badge7 silver badges15 bronze badges

Comments

user9061132 · Accepted Answer · 2018-01-19 10:58:43Z

5

the best way to fix this repeated function call on page load is to do

<a href="#" onClick={() => {this.handleClick}}>click me</a>

answered Jan 19, 2018 at 10:58

user9061132

1 Comment

vivalldi Over a year ago

It looks like you left off the () to call handleClick.

Dharman · Accepted Answer · 2020-07-27 16:15:40Z

2

using this code will produce a warning

<a href="#" onClick={() => action()}>Link</a>

there is a workaround this by following react cli advice and it is that if you cannot provide a valid link address with HTTP: etc to change your tag to a button. It is possible to make a button look like a link with pure CSS. here is the example.

step one create the button styles

const buttonToLink = {
        fontSize: '1em',
        textAlign: 'left',
        color: 'blue',
        background: 'none',
        margin: 0,
        padding: 0,
        border: 'none',
        cursor: 'pointer'
     
    }

step 2 add the styles to the button

<button style={buttonToLink} onClick={() => action()}> This link has no warning</button>

Please note that "action()" is the function we want the button to follow.

edited Jul 27, 2020 at 16:15

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 27, 2020 at 16:09

jerryurenaa

4,7701 gold badge33 silver badges21 bronze badges

1 Comment

Justinas Jakavonis Over a year ago

Button should be preferred when need to execute Javascript code without navigation: github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/…

Community · Accepted Answer · 2017-05-23 11:46:21Z

1

There is a slight performance issue with ---the second--- both snippets. Every time you render that <a> tag the function in the onClick will be reallocated.

Here is a detailed post outlining all the ways to bind this in react. (https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w)

Edited. I misinterpreted the example code, it has the same issue of allocating the function on each render as the inline arrow function snippet. Refer Vincent D'amour's accepted answer.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 22, 2017 at 21:11

marcusmolchany

6916 silver badges5 bronze badges

Comments

Sunil kumawat · Accepted Answer · 2020-01-31 13:21:39Z

0

I think you should bind with current object. let it try. refer the following example:

<a href="#" onClick={this.handleclick.bind(this)}>click me</a>

edited Jan 31, 2020 at 13:21

Sunil kumawat

8048 silver badges14 bronze badges

answered Aug 8, 2019 at 5:34

Dhanushka Udayanga

7817 silver badges4 bronze badges

Collectives™ on Stack Overflow

href with onClick in ReactJS

6 Answers 6

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related