[英]How to create a button component inside of a react-router Link that does not redirect?
I am trying to create a component where I have a button inside an entire element that is a Link that takes you elsewhere.我正在尝试创建一个组件,其中我在整个元素中有一个按钮,它是一个链接,可以将您带到其他地方。
see picture, where entire white block is a link and the button is the lock icon看图片,整个白色块是一个链接,按钮是锁定图标
I've seen various buttons about using e.stopPropagation()
or e.preventdefault()
but none seem to work.我见过各种关于使用
e.stopPropagation()
或e.preventdefault()
的按钮,但似乎没有一个有效。 This is what I am doing right now:这就是我现在正在做的事情:
<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>
Essentially what I want is for the function inside the IconButton
, which is togglePrivacy(event)
to be called without the page navigating to the new link.基本上我想要的是 IconButton 内的
IconButton
,这是在页面导航到新链接的情况下调用togglePrivacy(event)
。 Any recommendations?有什么建议吗?
Try event.preventDefault()
.尝试
event.preventDefault()
。 It looks like you need to capitalize the D
.看起来您需要将
D
大写。
<IconButton onClick={(event) => {
event.preventDefault();
this.togglePrivacy(event);
}}>
{...code}
</IconButton>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.