Javascript React JS切换/在悬停状态下添加类

我正在将animate.css库与React一起使用，并试图设置一个元素（按钮），使其在悬停时产生脉冲。试图查看文档和此处，但找不到实现此简单任务的方法。如果有人已经做到这一点或找到一个参考将不胜感激

class App extends Component {

   constructor(props) {
    super(props);

    this.handleHover = this.handleHover.bind(this);
  }

  handleHover(){
    this.setState({
        isHovered: !this.state.isHovered
    });
  }

  render() {
    const btnClass = this.state.isHovered ? "pulse animated" : "";

    return (
      <div>
        <button className={btnClass} onMouseEnter={this.state.handleHover} onMouseLeave={this.state.handleHover}>Test</button>
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleHover=this.handleHover.bind（this）；
}
handleHover（）{
这是我的国家({
Ishored:！this.state.Ishored
});
}
render（）{
const btnClass=this.state.isHovered“脉冲动画”：；
返回(
试验
);
}
}
导出默认应用程序；

您可以在组件上使用

onMouseEnter

和

onMouseLeave

事件，并相应地切换类

constructor(){
    super();
    this.state = {
        isHovered: false
    };
    this.handleHover = this.handleHover.bind(this);
}
handleHover(){
    this.setState(prevState => ({
        isHovered: !prevState.isHovered
    }));
}
render(){
    const btnClass = this.state.isHovered ? "pulse animated" : "";
    return <button className={btnClass} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></button>
}

constructor（）{
超级（）；
此.state={
伊什霍尔德：错
};
this.handleHover=this.handleHover.bind（this）；
}
handleHover（）{
this.setState（prevState=>({
isHovered:！prevState.isHovered
}));
}
render（）{
const btnClass=this.state.isHovered“脉冲动画”：；
返回
}

19年7月5日更新：挂钩

import React, { useState } from 'react';

export default function Component () {
  const [hovered, setHovered] = useState(false);
  const toggleHover = () => setHovered(!hovered);
  return (
    <button 
      className={hovered ? 'pulse animated' : ''}
      onMouseEnter={toggleHover}
      onMouseLeave={toggleHover}
    >
    </button>
  )
}

import React，{useState}来自“React”；
导出默认功能组件（）{
const[hovered，setHovered]=useState（false）；
常量toggleHover=（）=>sethover（！hover）；
返回(
)
}

使用css:hover属性怎么样？通过将css文件中的hover类部分改为：hover而不是react，这对我来说效果更好

---

我尝试使用上述建议，但反应似乎不够快，因此如果鼠标在按钮上缓慢移动，状态将变为错误。

当我将鼠标悬停在

TypeError上时，我收到一条错误消息：无法读取null的属性“setState”

特别是这一行

>34 | this.setState({

是的，您需要将该函数绑定到组件。但基本上，您可以在构造函数中执行

this.handleHover=this.handleHover.bind（this）

，或者将props更改为

onmouseinter={this.handleHover.bind（this）}

和

onMouseLeave={this.handleHover.bind（this）}

。因为您没有发布任何示例代码，所以我对您的项目做了一个假设。如果您发布整个组件，会更容易提供帮助。很抱歉，我已经向构造函数添加了一个状态，但似乎仍然无法修复它，我将代码添加到了原始问题中。@tonejac在提供函数作为this.setState的第一个参数：我认为这个答案更简单有效