我想让一个可点击的元素在一个链接没有它的行为像一个链接

Question

我有一个组件完全链接在一个<Link>标签，但我有一个图标，我想点击而不激活链接。有没有办法摆脱图标?

<Link to={`/post/${id}`} className='flex flex-row px-3 py-2'>
<div>Some content</div>
<i onClick={anAction}>An Icon</i>
<div>Some content</div>
</Link>

Answer 1

您应该使用e.preventDefault()

<Link to={`/post/${id}`} className='flex flex-row px-3 py-2'>
<div>Some content</div>
<i onClick={(e) => {e.preventDefault(); //rest of your function}}>An Icon</i>
<div>Some content</div>
</Link>

Answer 2

这是一个组件停止默认行为的例子，但我强烈反对这样做。如果可能的话，我宁愿只包装可以在<Link>中单击的内容(在您的用例中这很好)。

import { Link } from "react-router-dom";
const Test = () => {
const handleOnClick = (e) => {
e.preventDefault();
console.log("hello");
// ...rest
};
return (
<Link to={"/another-page"}>
Some text
<i onClick={handleOnClick}>Hello</i>
</Link>
);
};
export default Test;

Answer 3

通常应该避免在其他交互元素中呈现交互元素。如果你只是希望图标本身是可点击的，而不激活链接，但链接中的其他任何地方都应该激活它，那么防止图标中的点击事件传播，并允许默认链接动作发生。

的例子:

const anAction = e => {
e.preventDefault();
e.stopPropagation();
...
};
...
<Link to={`/post/${id}`} className='flex flex-row px-3 py-2'>
<div>Some content</div>
<i onClick={anAction}>An Icon</i>
<div>Some content</div>
</Link>