显示悬停在reactjs上的组件
问题描述:
我已经创建了几个部分,其中包含特定内容的标题。显示悬停在reactjs上的组件
我想在悬停在不同部分上方显示一个简短的潜行预览。
有谁知道如何创建一个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>
);
}
}
感谢您的这个例子。我解决了这个基地的问题,并添加了一些帮助功能来优化悬停的处理。 –