Javascript 添加/重新启动CSS动画后删除类单击React

我正在使用

CSS transform

在单击一个AwesomeFont图标时为其设置动画

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

好了，要触发动画，我需要在渲染后将上面的类添加到元素中。所以我在反应中这样做

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

类扩展组件{
状态={
喜欢：5，
剧本：假
}
handleClick=（）=>{
this.setState（（p）=>{return{play:p.play？false:true}；}）
}
render（）{
}
}

如果我只是在每次单击时切换状态，效果会非常好，但是现在我想在每次单击时触发动画

...

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

。。。
handleClick=（）=>{
this.setState（（p）=>{return{play:p.play？false:true}；}）
}
render（）{
}
}

这并不漂亮，但我只是想说明一点，我认为它没有发挥应有的作用，因为反复单击链接的数字部分不会触发动画，但单击

图标会触发动画

我尝试在mousedown上添加类
onMouseDown
并将其删除
onMouseUp
，但React只是批量增加
setStates
，结果一无所获。有人知道我该如何处理这个问题吗？
请尝试将标签更改为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')
}


这是家长
我是个孩子
#包装纸{
宽度：100px；
高度：100px；
边框：1px纯黑；
}
#孩子{
填充顶部：10px；
边框：1px纯红；
}
函数包装器click（）{
警报（'您单击了我'）
}
函数wrapperMouseUp（）{
警报（'鼠标向上'）
}

只需注意，鼠标在单击事件之前启动

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

handleMouseUp=（）=>{
setCounter（）
}
handleClick=（）=>{
setCounter（）
}
setCounter（）{
this.setState（（p）=>{return{play:p.play？false:true}；}）
}
render（）{
{this.state.likes}
}
}