React JS 切换/在悬停时添加 class

Question

我将 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;

Answer 1

您可以在组件上使用 onMouseEnter 和 onMouseLeave 事件并相应地切换 class。

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

2019 年 5 月 7 日更新：挂钩

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

Answer 2

使用 css :hover 属性怎么样？通过将 css 文件中的悬停 class 部分更改为使用 :hover 而不是反应，这对我来说效果更好。

我尝试使用上面的建议，但反应似乎不够快，所以如果鼠标在按钮上缓慢移动，状态会变得错误。

React JS 切换/在悬停时添加 class

React JS toggle/ adding a class on hover

javascript

reactjs

events

dom-events

animate.css