如何使链接中的按钮不触发链接重定向答案

【问题标题】：How to make a button within a Link not trigger Link redirect如何使链接中的按钮不触发链接重定向
【发布时间】：2020-10-07 22:59:15
【问题描述】：

我的页面上有一个 div，它使用不同的teamObjs 多次呈现。我使用Link 将其重定向到该团队的完整页面。

 <div className="team-card" key={teamObj.id}>
    <Link to={`${this.props.links.teams + "/" + teamObj.id}`}>
      <div className="row no-gutter flex" style={{ width: '100%', height: '100%' }}>
        <div className="col-sm-3 team-card-column">
            {this.renderTeamTitle(teamObj)}
        </div>
        <div className="col-sm-9">
          <div className="row" style={{ margin: '0 auto' }}>
            {teamLogo ?
              <>
                <div className="col-8 team-card-column">
                  <TeamInfoBars teamStats={teamStats} />
                </div>
                <div className="col-4 team-card-column">
                  <img className='team-card-img' src={teamLogo.url} alt="" />
                </div>
              </>
              :
              <div className="team-card-column">
                <TeamInfoBars teamStats={teamStats} />
              </div>
            }
          </div>
        </div>
      </div>
    </Link>
  </div >

在renderTeamTitle 中，我显示一个按钮，让用户加入团队。呈现此按钮的renderTeamTitle 部分如下：

<div className="col-3 col-sm-12">
      {(this.props.user && !this.inTeam(teamObj.id)) &&
        <button
          onClick={() => {
            this.joinTeam(teamObj);
          }}
          className="btn btn-success round-me join-team-btn-small raise"
        >
          Join
        </button>
      }
</div>

但是，由于此按钮是 Link 的子按钮，因此单击它会触发 joinTeam 以及 Link 重定向。自然，我不希望按钮执行后一种行为。解决此问题的最优雅方法是什么？

【问题讨论】：

标签： reactjs button react-router react-router-dom

【解决方案1】：

尝试停止除您之外的所有其他事件。这应该可以解决问题：

onClick={event => {
    event.preventDefault();
    event.stopPropagation();
    this.joinTeam(teamObj);
}}

【讨论】：

太棒了！正是我需要的。一旦 Stackoverfow 允许我，我会接受你的回答 :)