删除类/重启CSS动画的onClick在阵营

Question

我使用CSS transform当我点击它

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

据我所知，触发我需要上面的类添加到动画以动画的AwesomeFont图标元素被渲染后。所以，我这样做是在阵营

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