Javascript 在reactjs中为onClick添加活动类

当我点击一个div时，我想开始一个转换。目前我的转换只在使用css active时发生。当我点击这个div时，我希望这个转换发生。我怎么做？我使用的是reactjs，我认为应该使用状态。但我不知道该怎么做

我曾经做过类似的事情，但它并没有按照我的预期工作。当我只有

：active

类时，我做过类似的事情。但是在这个例子中，我有

：before

和

：active:before

我想知道如何通过具有

：before

属性的状态更改css

我找到了这个链接，但没有帮助

这是我的方法

<div className='vote_card_hover' style={{transform:this.state.toggle? 'translate(-50%, -50%) scale(1)':''}}>

试验

您的代码不在React中，因此我已对其进行了更新

基本上，在React中，您可以做同样的事情，通过状态更改添加和删除类

<MyComp className={this.state.isActive? 'active':''}
<button onClick={() => this.setState({isActive: !this.state.isActive})}>ToggleClass</button>
</MyComp>

。投票\u卡\u悬停{
位置：绝对位置；
宽度：100px；
高度：100px；
过渡：放松；
背景色：“红色”
}
.投票卡悬停：之前{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）比例（0）；
宽度：110%；
身高：110%；
背景：rgba（57161255,0.5）；
转型：转型0.5s轻松；
边界半径：50%；
}
.投票\卡\悬停。活动：在{
转换：转换（-50%，-50%）比例（1）；
}
钮扣{
位置：绝对位置；
顶部：200px
}

试验
toggleClass

按如下方式操作：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animate: false;
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    // modify the state, this will automatically recall render() below.
    this.setState((prevState) => {
      return { animate: !prevState.animate }
    });
  }

  render() {
    let animationClasses = (this.state.animate ? ' active': '');

    return (
      <div>
        <div className={`vote_card_hover${animationClasses}`}>
          <a>Test</a>
        </div>

        <div>
          <Button title="Toggle Animation" onClick={this.handleClick} />
        </div>
      </div>
    )
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
动画：假；
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
//修改状态，这将自动调用下面的render（）。
this.setState（（prevState）=>{
返回{animate:！prevState.animate}
});
}
render（）{
让animationClasses=（this.state.animate？'active'：''）；
返回(
试验
)
}
}

这只适用于使用该类的一个div。我不知道为什么。而且转换没有按照我想要的方式进行

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animate: false;
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    // modify the state, this will automatically recall render() below.
    this.setState((prevState) => {
      return { animate: !prevState.animate }
    });
  }

  render() {
    let animationClasses = (this.state.animate ? ' active': '');

    return (
      <div>
        <div className={`vote_card_hover${animationClasses}`}>
          <a>Test</a>
        </div>

        <div>
          <Button title="Toggle Animation" onClick={this.handleClick} />
        </div>
      </div>
    )
  }
}