CODEWITHSUNDEEP
javascriptreactjs
TechTurtle
TechTurtle

Reputation: 3187

href with onClick in ReactJS

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.

Upvotes: 44

Views: 169888

Answers (6)

Anderson Bressane
Anderson Bressane

Reputation: 426

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>

Upvotes: 7

jerryurenaa
jerryurenaa

Reputation: 4712

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.

Upvotes: 2

Dhanushka Udayanga
Dhanushka Udayanga

Reputation: 781

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>

Upvotes: 0

Vincent D&#39;amour
Vincent D&#39;amour

Reputation: 3903

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.

Upvotes: 42

user9061132
user9061132

Reputation:

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

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

Upvotes: 5

marcusmolchany
marcusmolchany

Reputation: 691

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.

Upvotes: 1

Related Questions