admin管理员组文章数量:1334357
I have the following html element:
<a href onClick={() => fields.push()}>Add Email</a>
I need the href attribute so bootstrap styles the element with a link styling (color, cursor).
Problem is, if I click that now it causes the browser to redirect. How can I update the above to not redirect the browser onClick but still run fields.push()
?
I have the following html element:
<a href onClick={() => fields.push()}>Add Email</a>
I need the href attribute so bootstrap styles the element with a link styling (color, cursor).
Problem is, if I click that now it causes the browser to redirect. How can I update the above to not redirect the browser onClick but still run fields.push()
?
17 Answers
Reset to default 45You should call preventDefault function from onClick event like this:
class App extends React.Component {
onClick = (e) => {
e.preventDefault()
console.log('onclick..')
}
render() {
return (
<a href onClick={this.onClick} >Click me</a>
)
}
}
You can use something like this particular to your use case:
const renderEmails = ({ fields }) => (
...
<a href onClick={(e) => {
e.preventDefault()
fields.push()
}}>Add Email</a>
...
)
Here's a simple solution,
On React class component
class App extends React.Component {
onClick() {
console.log('onclick..')
}
render() {
return (
<a href={void(0)} onClick={this.onClick} >Click me</a>
)
}
}
React is dropping the
javascript:void(0)
solution and the href doesn't certainly accept the empty attribute value.
Basically what react wants us to do is to use a different component, for instance a button. We can always make a button look like a link using CSS(and thus, won't contain href
and the complexity to remove it's behaviour). So, instead of using an anchor tag as a button, use the button element itself. Hope it makes sense.
You should consider write method clickHappens in react component instead of writing this inline. Hope it works!
<a href onClick={(e) => {e.preventDefault(); fields.push()}}> Add Email </a>
Add e.preventDefault()
to onClick and add href="#"
attribute
<a href="#" onClick={(e) => { e.preventDefault(); fields.push(); }}>Add Email</a>
Using Ritesh's answer, but without the issue of "Received true for a non-boolean attribute href", I simply swapped out the <a> tag with a <span>
class App extends React.Component {
onClick = (e) => {
e.preventDefault()
console.log('onclick..')
}
render() {
return (
<span onClick={this.onClick}>Click me</span>
)
}
}
Just make a custom component like this;
import React from "react";
export default function Link({ to, className, children }) {
return (
<a
href={to}
className={className}
onClick={(e) => {
e.preventDefault();
}}
>
{children}
</a>
);
}
try this code;
<a href={undefined} onClick={() => {/*function code*/}}></a>
void(0) returns undefined. so you should write directly undefined on React because javascript:URL deprecated by React.
https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls
This solution can also be helpful:
<a href={void(0)} onClick={(e)=>{
e.preventDefault();
}}>
Here is a simple solution, it's worked for me:
<a href={'/'} onClick={
(e) => {
e.preventDefault()
openProfileBox()
}
}
target="self" title='profile'>
{iconStyle(CgProfile)}
</a>
The "href" is a link for the index page, but with "e.preventDefault()" method, I can deny the link from work and call the second function to work successfully.
I use it this way:
const url = '#'
<a href={url} onClick={() => alert('Test')}>Any text</a>
I use this one liner to conditionally redirect, or not. Give null value to href, and it will be rendered as a dummy Anchor tag.
<a href={isDisableRedirect ? null : REDIRECT_LINK}>link</a>
// rendered as `<a>link</a>` in DOM.
- no '#' in URL;
- no need to call
e.preventDefault();
- simple~
<a href={void(0)} onClick={()=>{console.log('...')}}>
Solution for Javascript:void(0); in React JS is to use the href="preventDefault()" . This will prevent the default behaviour of a link causing the page to refresh or navigate away.
One alternative solution is to use a <button>
styled as a link instead of using an anchor to do nothing on click.
button {
background: none!important;
border: none;
padding: 0!important;
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button type="button"> My link </button>
add javscript:void(0):
<a href="javascript:void(0);" onClick={() => fields.push()}>Add Email</a>
fields.push()}>Add Email
In TypeScript href="javascript:void(0);"
throws warning, so there any other way to skip that warnings
try the following code snippet
<a href="true" ....>
本文标签: javascriptIn Reacthow can I cause anchors to do nothing on clickStack Overflow
版权声明:本文标题:javascript - In React, how can I cause anchors to do nothing on click? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1737007399a1959335.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
<a href='#' onClick={...} ></a>
– davidhu Commented Jun 30, 2017 at 4:17