javascript - 在 reactjs 中为 onClick 添加事件类

Question

我想在单击 div 时开始转换。目前我的转换仅在使用 css active 时发生。我希望在单击此 div 时发生此转换。我怎样才能做到这一点？我正在使用 reactjs，我认为应该使用状态来完成。但我不知道该怎么做。

我做过类似的事情，但它没有按照我的预期工作。当我只有 :active 类时，我做了类似的事情。但在这种情况下，我有 :before 和 :active:before。

我想知道如何通过具有 :before 属性的状态更改 css。

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

ReactJs adding active class to button

这是我的做法

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

我的代码

<div className='vote_card_hover'>

     <a>Test</a>

</div>

我的 CSS

.vote_card_hover {
  position: absolute;
  width: 100px;
  height:100px;
  transition: .3s ease;
  background-color: 'red'
}

.vote_card_hover:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 110%;
  height: 110%;
  background: rgba(57, 161, 255, 0.5);
  transition: transform 0.5s ease;
  border-radius: 50%;
}

.vote_card_hover:active:before {
  transform: translate(-50%, -50%) scale(1);
}

   <div class='vote_card_hover'>

                 <a>Test</a>

   </div>

Answer 1

这样做:

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