在reactjs中显示悬停时的组件

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我想展示一下将鼠标悬停在其他部分上方的简短预览。

有谁知道如何使用有条件的React组件创建hoverActionHandler吗？

回答：

您可以使用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>
    );
  }
}

以上是 在reactjs中显示悬停时的组件 的全部内容， 来源链接： utcz.com/qa/415068.html

回到顶部