I'm rendering a link with react:
render: ->
`<a className="upvotes" onClick={this.upvote}>upvote</a>`
Then, above I have the upvote function:
upvote: ->
// do stuff (ajax)
Before link I had span in that place but I need to switch to link and here's the trouble - every time I click on .upvotes
the page gets refreshed, what I've tried so far:
event.preventDefault() - not working.
upvote: (e) ->
e.preventDefault()
// do stuff (ajax)
event.stopPropagation() - not working.
upvote: (e) ->
e.stopPropagation()
// do stuff (ajax)
return false - not working.
upvote: (e) ->
// do stuff (ajax)
return false
I've also tried all of the above using jQuery in my index.html, but nothing seems to work. What should I do here and what I'm doing wrong? I've checked event.type and it's click
so I guess I should be able to avoid redirect somehow?
Excuse me, I'm a rookie when it comes to React.
Thank you!
This question is related to
reactjs
hyperlink
coffeescript
preventdefault
render: ->
<a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>
In a context like this
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
As you can see, you have to call preventDefault() explicitly. I think that this docs, could be helpful.
If you use checkbox
<input
type='checkbox'
onChange={this.checkboxHandler}
/>
stopPropagation and stopImmediatePropagation won't be working.
Because you must using onClick={this.checkboxHandler}
A full version of the solution will be wrapping the method upvotes inside onClick, passing e and use native e.preventDefault();
upvotes = (e, arg1, arg2, arg3 ) => {
e.preventDefault();
//do something...
}
render(){
return (<a type="simpleQuery" onClick={ e => this.upvotes(e, arg1, arg2, arg3) }>
upvote
</a>);
{
A nice and simple option that worked for me was:
<a href="javascript: false" onClick={this.handlerName}>Click Me</a>
The Gist I found and works for me:
const DummyLink = ({onClick, children, props}) => (
<a href="#" onClick={evt => {
evt.preventDefault();
onClick && onClick();
}} {...props}>
{children}
</a>
);
Credit for srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53
just like pure js do preventdefault : in class you should like this create a handler method :
handler(event) {
event.preventDefault();
console.log(event);
}
try bind(this) so your code looks like below --
<a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a>
or if you are writing in es6 react component in constructor you could do this
constructor(props){
super(props);
this.upvote = this.upvote.bind(this);
}
upvote(e){ // function upvote
e.preventDefault();
return false
}
This is because those handlers do not preserve scope. From react documentation: react documentation
Check the "no autobinding" section. You should write the handler like: onClick = () => {}
I've had some troubles with anchor tags and preventDefault
in the past and I always forget what I'm doing wrong, so here's what I figured out.
The problem I often have is that I try to access the component's attributes by destructuring them directly as with other React components. This will not work, the page will reload, even with e.preventDefault()
:
function (e, { href }) {
e.preventDefault();
// Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>
It seems the destructuring causes an error (Cannot read property 'href' of undefined
) that is not displayed to the console, probably due to the page complete reload. Since the function is in error, the preventDefault
doesn't get called. If the href is #, the error is displayed properly since there's no actual reload.
I understand now that I can only access attributes as a second handler argument on custom React components, not on native HTML tags. So of course, to access an HTML tag attribute in an event, this would be the way:
function (e) {
e.preventDefault();
const { href } = e.target;
// Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>
I hope this helps other people like me puzzled by not shown errors!
I didn't find any of the mentioned options to be correct or work for me when I came to this page. They did give me ideas to test things out and I found that this worked for me.
dontGoToLink(e) {
e.preventDefault();
}
render() {
return (<a href="test.com" onClick={this.dontGoToLink} />});
}
If you are using React Router, I'd suggest looking into the react-router-bootstrap library which has a handy component LinkContainer. This component prevents default page reload so you don't have to deal with the event.
In your case it could look something like:
import { LinkContainer } from 'react-router-bootstrap';
<LinkContainer to={givePathHere}>
<span className="upvotes" onClick={this.upvote}>upvote</span>
</LinkContainer>
none of these methods worked for me, so I just solved this with CSS:
.upvotes:before {
content:"";
float: left;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
Source: Stackoverflow.com