на ту же мышиную ошибку React - PullRequest
Новая
       3

на ту же мышиную ошибку React

0 голосов
/ 03 марта 2020

Я хотел бы спросить, почему не работает моя реализация и как можно это сделать?

Я просто хочу, когда при наведении курсора на элемент (изображение - «заклинание Я») затем всплывает окно ( содержат краткое описание)

Проблема: Моя кнопка работает частично

  • Я должен щелкнуть изображение и затем появиться.
  • Если я переместлю курсор, а не вызову vani sh, я должен снова щелкнуть сам текст, а затем vani sh. 
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;
}

1 Ответ

0 голосов
/ 05 марта 2020

Нет ошибок. Только в инструменте разработки Google Chrome не работают мышиные события onMouseLeave и onMouseEnter. Вы должны нажать здесь.

Но вот немного элегантный и современный код. 

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;
...