如何在不重定向的 react-router 链接内创建按钮组件？

Question

我正在尝试创建一个组件，其中我在整个元素中有一个按钮，它是一个链接，可以将您带到其他地方。

看图片，整个白色块是一个链接，按钮是锁定图标

我见过各种关于使用e.stopPropagation()或e.preventdefault()的按钮，但似乎没有一个有效。 这就是我现在正在做的事情：

<Link to={`/editAccount/${account._id}`} key={account._id} className="friend displayHorizontallyNoSpaceBetween curveAll transition lightGrayBG">
      <div style={{background: account.color}} className="firstLetter curveLeft centerSelf righteous lightGray">
          {account.account_name[0].toUpperCase()}
      </div>
      <div className="info">
          <h3 className="wordWrap">{account.account_name}</h3>
          <h6>Your account</h6>
      </div>
      <div className="darkGray centerSelf myAccountsFlexEndPrice">
          <IconButton onClick={(event) => {
              event.stopPropagation();
              this.togglePrivacy(event)
          }}> 
              <LockOpenOutlinedIcon style={{ fontSize: 16}} />
          </IconButton>
      </div>
      <div className="myAccountsFlexEndPrice paddingPriceMyAccounts centerSelf darkGray">
          <div className="priceText">
              ${account.total_price.toFixed(2)}
          </div>
                  
      </div>
</Link>

基本上我想要的是 IconButton 内的IconButton ，这是在页面导航到新链接的情况下调用togglePrivacy(event) 。 有什么建议吗？

Answer 1

尝试event.preventDefault() 。 看起来您需要将D大写。

<IconButton onClick={(event) => {
    event.preventDefault();
    this.togglePrivacy(event);
}}>
    {...code}
</IconButton>