如何在反应中使用链接中的按钮？答案

【问题标题】：How to use a button in a link in react?如何在反应中使用链接中的按钮？
【发布时间】：2023-02-26 18:30:06
【问题描述】：

我是反应的初学者，我有这段代码：

import { NavLink as Link } from 'react-router-dom'

  return <div>
    {posts.map((actualData, index) => ( 
      <Link to={"/"+actualData.id}>
      <div className="format_link">
        <div className="image_link">
          <div className="image">
            <img className="images" id={actualData.id} src={getImage(actualData.path, 0)} alt="Italian Trulli" />
            <button className="arrow right" id={"button" + actualData.id} onClick={() => changeImageNext(actualData.id, actualData.path)}>{'>'}</button>
            <button className="arrow left" id={"button" + actualData.id} onClick={() => changeImagePre(actualData.id, actualData.path)} >{'<'}</button>
          </div>
        </div>
        <div className="desc_link">
          <div className="event"><div className="save"> </div></div>
        </div>
      </div>
      </Link>
    ))}
  </div>;

我想使用按钮，但如果我按下它们，我将被发送到文章链接。我试图用 Button 替换按钮 -> import { Button } from 'semantic-ui-react <--
或者使用“ event.stopPropagation() ”（虽然可能我没有正确使用它），我是这样使用的：

  function changeImagePre(e, id, images) {
    e.stopPropagation();
    var num = parseInt(result[id].images);
    .
    .
    .
  }


  return <div>
    {posts.map((actualData, index) => ( 
      <Link to={"/"+actualData.id}>
      <div className="format_link">
        <div className="image_link">
          <div className="image">
            <img className="images" id={actualData.id} src={getImage(actualData.path, 0)} alt="Italian Trulli" />
            <button className="arrow right" id={"button" + actualData.id} onClick={(e) => changeImageNext(actualData.id, actualData.path)}>{'>'}</button>
            <button className="arrow left" id={"button" + actualData.id} onClick={(e) => changeImagePre(actualData.id, actualData.path)} >{'<'}</button>
          </div>
        </div>
        <div className="desc_link">
          <div className="event"><div className="save"> </div></div>
        </div>
      </div>
      </Link>
    ))}
  </div>;

因此，要使用链接中的按钮我该怎么办？ :(

【问题讨论】：

标签： javascript reactjs frontend react-router-dom

【解决方案1】：

总是喜欢 atomic design 以避免重复你的代码。首先，编写一个单独的组件。

export default function Btn(props) {
  return (
    <button
      type="button"
      onClick={() => window.open(`${props.link}`)}>
      {props.text}
    </button>
  )
}

然后，在您的代码中，您只需要按如下方式导入和使用它：

import Btn from '@/components/global/atoms/Btn'

{/* Here goes the rest of your code */}

<Btn
  link="https://www.mywebsite.com"
  text="Button Text"
></Btn>

【讨论】：