在reactjs中悬停显示组件[关闭]

问题描述 投票:9回答:1

我已经创建了几个具有特定内容标题的部分。

我希望在不同部分上方悬停显示一个简短的预览。

有谁知道如何使用条件渲染反应组件创建hoverActionHandler?

css reactjs
1个回答
27
投票

您可以使用onMouseEnteronMouseLeave来更改状态并根据状态值有条件地渲染组件。

看到它在行动: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>
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.