ClassList 切换在 React 中不起作用。我做错了什么？

Question

我试图让轮子图像在单击时旋转（CSS 变换+过渡）。现在，我只能使用

img: active

按住鼠标按钮使其旋转。我一直在寻找答案，通常感觉我应该使用

onClick

来打开和关闭动画的类，但我似乎做得不对。我究竟做错了什么？这是我的代码供参考：

class Wheel extends React.Component
{
  constructor(props){
    super(props);

    this.spin = this.spin.bind(this);
  }
  
  spin(e){
    e.classList.toggle('rotate');      
  }

  render(){
    return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={this.spin}/>
</div>);    
  }
}

ReactDOM.render(
  <Wheel/>,
  document.getElementsByClassName('container-fluid')[0]
);

CSS：

.rotate {
  -webkit-transform: rotate(1095deg);
  -webkit-transition: -webkit-transform 3s ease-out;
}

/* 
img:active {
  -webkit-transform: rotate(1095deg);
  -webkit-transition: -webkit-transform 3s ease-out;
}
*/

我也将所有内容放在CodePen上。

Answer 1

事件处理程序的

e

参数是触发的事件，而不是节点。目标节点是

e.target

所以你的代码应该是

e.target.classList.toggle('rotate');