前端之家

  1. 首页
  2. 问答

如何在我的Reactjs应用程序中通过Material UI设置样式关闭onMouseLeave

• 问答

我有一个打开onmouseEnter的模式，效果很好，但是，当用户停止将鼠标悬停在按钮上时，我无法在onmouseLeave上将其关闭。

这是我的组成部分：

我尝试将事件监听器onmouseLeave添加到button标记中，但是它无法正常工作。有什么想法吗？

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;
wumao19910 回答：如何在我的Reactjs应用程序中通过Material UI设置样式关闭onMouseLeave
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

我更新了codesandbox链接，但似乎codesandbox为我运行它时遇到了一些问题，因此我也将整个代码发布到了这里。

material-uimodal-dialogreactjs
本文链接：https://www.f2er.com/3148126.html

大家都在问