我有一个弹出窗口,当我将鼠标悬停在/离开按钮时打开/关闭,目前在我的道具中设置为false,我想将其设置为true所以当加载页面时你看到弹出但是当使用悬停在它上面,状态重新变为假,所以我可以再次盘旋它并看到它,但我似乎无法弄明白。
<!-- language: lang-js -->
Class App extends Component {
constructor(props) {
super(props);
this.state = { isHovered: false };
this.handleHover = this.handleHover.bind(this);
}
handleHover(){
this.setState({
isHovered: !this.state.isHovered
});
}
render() {
const box = this.state.isHovered ? "box open" : "box";
return(
<a className="spot1" onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}>
</a>
<div className={box}>
<p>Lorem ipsum dolor si</p>
</div>
)
答案 0 :(得分:1)
我相信你需要第二个变量来检查你的组件是否第一次被加载/渲染, 您可以在下面找到一个简单的例子。
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {loaded : true, hovered : false};
}
popState () {
const {loaded, hovered} = this.state;
// check if the component was loaded
// which will be only once
// because the state for loaded will be set to false
if (loaded) {
return this.setState({
hovered : !hovered,
loaded : false
});
}
this.setState({
hovered : !hovered
});
}
render () {
const {loaded, hovered} = this.state;
let box;
// first page reload
if (loaded) {
box = 'show';
} else {
box = hovered ? 'show' : 'hide';
}
return (
<a
onMouseEnter={this.popState.bind(this)}
onMouseLeave={this.popState.bind(this)}>
My link
<div
className={box}>Tooltip</div>
</a>
);
}
}
答案 1 :(得分:0)
你已经制作了你想要的东西,它还没有正确连接。
首先,设置isHovered: true
,以便在页面加载时显示弹出窗口。
接下来,将功能onMouseEnter
和onMouseLeave
更改为this.handleHover
,这就是您应该做的所有事情。