Reputation: 3187
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
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
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
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
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
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
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