在React中添加/重启CSS动画onClick之后删除类

Question

单击它时，我正在使用CSS transform为AwesomeFont图标设置动画

.animate {
    -webkit-animation-duration: 400ms;
    -webkit-animation-name: animation
}

AFAIK，要触发动画，我需要在渲染之后将上述类添加到元素中。 所以我在React中做到这一点

class Class extends Component {
  state = {
    likes: 5,
    play: false
  }

  handleClick = () => {
    this.setState((p) => { return {play: p.play ? false : true}; })
  }

  render() {
    <a onClick={this.handleClick} href="#" />
      <Icon className={this.state.play ? 'animate' : ''} name="thumbs-up" />
      {this.state.likes}
    </a>
  }
}

如果我每次点击都切换状态，效果会很好，但是现在我想在每次点击时触发动画

...

  handleClick = () => {
    this.setState((p) => { return {play: p.play ? false : true}; })
  }

  render() {
    <a onClick={this.handleClick} onMouseUp={() => this.setState(()=>{return {play:false}; })} href="#" />
      <Icon className={this.state.play ? 'animate' : ''} name="thumbs-up" />
      {this.state.likes}
    </a>
  }
}

它不是很漂亮，但是我只是想说明一点，而且我认为它没有按预期的效果工作，因为反复单击链接的数字部分不会触发动画，但是单击“ Icon会触发动画。

我尝试添加类onMouseDown并删除它onMouseUp但是React只是批处理setStates ，因此没有任何结果。 有任何想法的人我应该如何解决这个问题？

Answer 1

请尝试将标签更改为div标签。 单击和其他鼠标事件在div及其子元素上都可以正常工作。 看一个例子：

<div id='wrapper' onClick='wrapperClick()' onMouseUp='wrapperMouseUp()'>
  This is parent
  <div id='child'>
    I am child
  </div>
</div>


#wrapper {
  width:100px;
  height:100px;
  border:1px solid black;
}

#child {
  padding-top:10px;
  border:1px solid red;
}

function wrapperClick() {
  alert('you clicked me')
}

function wrapperMouseUp() {
  alert('Mouse Up')
}

请注意，在单击事件之前会触发鼠标上移。

handleMouseUp = () => {
  setCounter()
}
handleClick = () => {
  setCounter()
}

setCounter() {
  this.setState((p) => { return {play: p.play ? false : true}; })
}

  render() {
    <div onClick={this.handleClick} onMouseUp={this.handleMouseUp} href="#" />
      <Icon className={this.state.play ? 'animate' : ''} name="thumbs-up" />
      {this.state.likes}
    </div>
  }
}