显示悬停在reactjs上的组件

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