web-dev-qa-db-fra.com

React JS bascule / ajoute une classe au survol

J'utilise la bibliothèque animate.css avec React et j'essaie de configurer un élément (bouton) pour Pulse lorsqu'il est survolé. J'ai essayé de parcourir les documents et ici, mais je ne trouve pas de moyen de réaliser cette tâche simple. Si quelqu'un y parvient ou trouve une référence, ce serait très apprécié.

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;
javascriptreactjseventsdom-eventsanimate.css
9
Fernando B

Vous pouvez utiliser les événements onMouseEnter et onMouseLeave sur le composant et basculer la classe en conséquence.

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

Mise à jour 05/07/19: Crochets

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>
  )
}
26
Chase DeAnda