已解決430363個問題，去搜搜看，總會有你想問的

在 React 中單擊 on 上的突出顯示和取消突出顯示 div

首頁猿問在 React 中單擊 on...

在 React 中單擊 on 上的突出顯示和取消突出顯示 div

JavaScript

汪汪一只貓 2022-08-04 16:54:15

我有div，我想用CSS突出顯示一個.onClick<div className={"amount-circle" + (this.state.activeCircle ? ' active' : '')} onClick={() => this.amountChanged(2)}> <p>2</p></div><div className={"amount-circle" + (this.state.activeCircle ? ' active' : '')} onClick={() => this.amountChanged(5)}> <p>5</p></div><div className={"amount-circle" + (this.state.activeCircle ? ' active' : '')} onClick={() => this.amountChanged(10)}> <p>10</p></div>我的狀態是一個布爾值，在開始時設置為布爾值。activeCirclefalse在我設置為 true。this.amountChanged()activeCircle但問題是，每個div都被突出顯示，我沒有弄清楚如何在沒有.onClickkey

查看完整描述

2 回答

隔江千里

TA貢獻1906條經驗獲得超10個贊

所有 div 都變為活動狀態的原因是因為它們依賴于同一標志。

這里最正確的解決方案是依靠set amount

假設您在狀態金額中設置了所選金額，您將實現如下所示的活動邏輯

<div

className={"amount-circle" + (this.state.amount == 2 ? ' active' : '')}

onClick={() => this.amountChanged(2)}>

</div>

<div

className={"amount-circle" + (this.state.amount == 5 ? ' active' : '')}

onClick={() => this.amountChanged(5)}>

</div>

<div

className={"amount-circle" + (this.state.amount == 10 ? ' active' : '')}

onClick={() => this.amountChanged(10)}>

</div>

反對回復 2022-08-04

德瑪西亞99

TA貢獻1770條經驗獲得超3個贊

你不能做這樣的事情嗎？

<div onClick={(e) => e.target.classList.toggle('active')}>

coucou

</div>

您不會依賴任何標志，只需依靠點擊目標。這是對StackBlitz的重現

反對回復 2022-08-04

2 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 React 中單擊 on 上的突出顯示和取消突出顯示 div

在 React 中單擊 on 上的突出顯示和取消突出顯示 div

2 回答

添加回答