在 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&nbsp; className={"amount-circle" + (this.state.amount == 2 ? ' active' : '')}&nbsp; onClick={() => this.amountChanged(2)}>&nbsp; &nbsp; <p>2</p></div><div&nbsp; className={"amount-circle" + (this.state.amount == 5 ? ' active' : '')}&nbsp; onClick={() => this.amountChanged(5)}>&nbsp; &nbsp; <p>5</p></div><div&nbsp; className={"amount-circle" + (this.state.amount == 10 ? ' active' : '')}&nbsp; onClick={() => this.amountChanged(10)}>&nbsp; &nbsp; <p>10</p></div>

Answer 2

你不能做这样的事情吗？<div onClick={(e) => e.target.classList.toggle('active')}>&nbsp; coucou</div>您不会依赖任何标志，只需依靠点击目标。这是对StackBlitz的重现