在 React 中单击 on 上的突出显示和取消突出显示 div

Question

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

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的重现