我想在 Link 中制作一个可点击的元素，而不是像 link

Question

我有一个组件完全 link 在 <Link> 标签中编辑，但我有一个图标，我希望在不激活 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，但 link 中的其他任何地方都应该激活它，则阻止图标中的单击事件传播并允许默认 link 动作发生。

示例：

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>

Answer 3

这是停止默认行为的组件示例，但我强烈反对总体上执行此类操作。如果可能的话，我宁愿只包装可以在 <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;

我想在 Link 中制作一个可点击的元素，而不是像 link

I want to make a clickable element inside a Link without it behaving like a link

reactjs

react-router