如何使链接内的按钮不触发链接重定向

Question

我的页面上有一个div，该div用不同的teamObj呈现了多次。我使用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重定向。自然，我不希望按钮执行后一种行为。解决这个问题的最优雅的方法是什么？

Answer 1

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