在React中的onClick上高亮显示和取消高亮显示div

Question

我有一些div要用onClick用CSS突出显示。

<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>

我的状态activeCircle是一个布尔值，在开始时设置为false。

在this.amountChanged()中，我将activeCircle设置为true。

但问题是，每个div都突出显示onClick，我不知道如何在没有key的情况下实现它。

Answer 1

所有div变为活动的原因是因为它们依赖于同一个标志。

这里最正确的解决方案是依靠set amount

假设你在状态金额中设置了所选金额，你就会实现下面这样的活动逻辑

<div
className={"amount-circle" + (this.state.amount == 2 ? ' active' : '')}
onClick={() => this.amountChanged(2)}>
<p>2</p>
</div>
<div
className={"amount-circle" + (this.state.amount == 5 ? ' active' : '')}
onClick={() => this.amountChanged(5)}>
<p>5</p>
</div>
<div
className={"amount-circle" + (this.state.amount == 10 ? ' active' : '')}
onClick={() => this.amountChanged(10)}>
<p>10</p>
</div>

Answer 2

你就不能这样做吗？

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

你不会依赖任何标志，只需要点击目标。这是StackBlitz 的演示