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