Как я могу сделать это модальным закрытием onMouseLeave в моем приложении Reactjs, стилизованном с помощью Material UI

Question

У меня есть модал, который открывается на onMouseEnter, который прекрасно работает, однако у меня возникают проблемы с закрытием его на onMouseLeave, когда пользователь перестает зависать над кнопкой.

Вот мой компонент:

Я попытался добавить прослушиватель событий onMouseLeave к тегу кнопки, но он работает неправильно. Есть идеи?

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';

const useStyles = makeStyles(theme => ({
  modal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

const DistributionLineOverflow = props => {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onMouseEnter={handleOpen}>
        i
      </button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <p id="transition-modal-description">
              Service Dates: {props.serviceDates}
            </p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
};

export default DistributionLineOverflow;

Answer 1

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onMouseEnter={() => handleOpen()}
        onMouseLeave={() => handleClose()}
      >
        i
      </button>
      <div
        style={{
          width: 500,
          height: 500,
          backgroundColor: "blue",
          display: open ? "block" : "none"
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Попробуйте вместо этого вызывать ваши методы.

Я создал изолированную программную среду с похожим поведением: https://codesandbox.io/s/crazy-meninsky-7fl2o

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