リアクションのホバー上にコンポーネントを表示

Question

特定のコンテンツの見出しを含む複数のセクションを作成しました。

さまざまなセクションの上にカーソルを置くと、簡単なスニークプレビューが表示されます。

反応コンポーネントの条件付きレンダリングでhoverActionHandlerを作成する方法を知っている人はいますか？

Answer 1

onMouseEnterおよびonMouseLeaveを使用して、状態の値を変更し、状態の値に基づいてコンポーネントを条件付きでレンダリングできます。

アクションでそれを参照してください：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> 
    ); 
    } 
}