删除类/重启CSS动画的onClick在阵营
问题描述:
我使用CSS transform
当我点击它删除类/重启CSS动画的onClick在阵营
.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
,结果什么也没有。有任何想法的人应该如何处理这个问题?
答
请尝试将标签更改为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>
}
}