Afficher un composant en survol dans reactjs

Question

J'ai créé plusieurs sections avec le titre du contenu spécifique.

Je veux montrer un bref aperçu en survolant la section différente.

Quelqu'un sait-il comment créer un hoverActionHandler avec un rendu conditionnel d'un composant React?

Answer 1

Vous pouvez utiliser onMouseEnter et onMouseLeave pour modifier l'état et rendre un composant conditionnellement en fonction de la valeur de l'état.

Voyez-le en action: https://codesandbox.io/s/XopkqJ5oV

import React, { Component } from 'react';

class HoverExample extends Component {
  constructor(props) {
    super(props);
    this.handleMouseHover = this.handleMouseHover.bind(this);
    this.state = {
      isHovering: false,
    };
  }

  handleMouseHover() {
    this.setState(this.toggleHoverState);
  }

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering,
    };
  }

  render() {
    return (
      <div>
        <div
          onMouseEnter={this.handleMouseHover}
          onMouseLeave={this.handleMouseHover}
        >
          Hover Me
        </div>
        {
          this.state.isHovering &&
          <div>
            Hovering right meow! ????
          </div>
        }
      </div>
    );
  }
}