如何在不重定向的 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内的函数，togglePrivacy(event)在没有页面导航到新链接的情况下调用该函数。有什么建议吗？

Answer 1

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

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