悬停鼠标事件错误反应答案

【问题标题】：onhover mousevent bug React悬停鼠标事件错误反应
【发布时间】：2020-03-05 17:35:59
【问题描述】：

我想问一下为什么不执行我的实现以及如何实现？

我只是想当悬停一个元素（图像-“我的拼写”）然后弹出一个窗口（包含简短描述）

问题：我的按钮部分工作

我必须单击图像然后出现。
如果我移动光标不触发消失，我必须再次单击文本本身然后消失。

import React from "react";
import "./PopUp_Example.css";
import info_button from "../../assets/Card/info-button.svg";

class PopUp_Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
    this.toggleHover_open = this.toggleHover_open.bind(this);
    this.toggleHover_close = this.toggleHover_close.bind(this);
  }
  toggleHover_open() {
    this.setState({ open: true });
  }
  toggleHover_close() {
    this.setState({ open: false });
  }
  render() {
    let changing_css_class;
    if (this.state.open) {
      changing_css_class = "appear";
    } else {
      changing_css_class = "vanish";
    }
    return (
      <div className="popup_container">
        <div className={changing_css_class}>
          <p>Pop Up text</p>
        </div>

        <div className="something">
          <div
            className="info"
            onMouseLeave={this.toggleHover_close}
            onMouseEnter={this.toggleHover_open}
          >
            <img src={info_button} alt="I button image" />
          </div>
          <div>Something on the page</div>
        </div>
      </div>
    );
  }
}
export default PopUp_Example;

.popup_container{
  position: relative;
  top:20px;
  display: flex;
  flex-direction: column;
  border: 3px solid red;
  width:100%;
}
.something{
  display: flex;
}
.info{
  width: 2rem;;
}
.appear{
  width:100%;
  border:3px solid green;
}
.hidden{
  display: none;
}

【问题讨论】：

标签： css reactjs hover jsx

【解决方案1】：

没有错误。仅在 Google Chrome 开发工具中 onMouseLeave 和 onMouseEnter mouseevent 不起作用。你必须点击那里。

但这里有一点优雅和现代的代码。

import React, {useState} from 'react'
import './PopUp_Example.css';
import info_button from '../../assets/Card/info-button.svg';

const PopUp_Example = props => {
    const [toogleState, setToogleState] = useState({
        toogles: [
           { number1: false}           
        ]
    });   

const toogleHandler_in = () =>{
    setToogleState ({
        toogles: [
            { number1: true},           
     ] 
    }); 
};

const toogleHandler_out = () =>{
    setToogleState ({
        toogles: [
            { number1: false},           
     ] 
    }); 
};

var changing_css_class;
if (toogleState.toogles[0].number1) {
  changing_css_class = "appear";
} else {
  changing_css_class = "hidden";
}   

     return (
         <div className="popup_container">                                        
                <div className={changing_css_class}>
                    <p >Pop Up text</p>        
                 </div>             

        <div className="something">
                <div className="info" onMouseLeave={toogleHandler_out} onMouseEnter={toogleHandler_in} >                            
                     <img src={info_button} alt='I button image'/>
                 </div> 
                    <div>Something on the page</div>  
                </div>
         </div>
    )
}
 export default PopUp_Example;

【讨论】：