如何在不重定向的 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>