reactjs 我无法使用crossIcon关闭警报窗体MUI

eulz3vhy 于 2023-05-17 发布在 React

关注(0)|答案(2)|浏览(142)

我有一个snackBar和里面的警报都来自MUI。问题是我想使用一个函数关闭警报，当单击crossIcon时，关闭它。我不知道为什么它不工作，因为我使用的大多数代码从MUI的例子。有什么想法吗？我是新来的React和MUI。

import { useState } from 'react';

import CloseIcon from '@mui/icons-material/Close';
import { Alert, AlertTitle, IconButton, Snackbar, Typography } from '@mui/material';

interface InfoMessageProps {
  open: boolean;
}

export const InfoMessage = ({ open }: InfoMessageProps) => {
  const [openMessage, setOpenMesage] = useState(false);

  // const handleClose = (_event?: Event | React.SyntheticEvent, reason?: string) => {
  //   if (reason === 'clickaway') {
  //     return;
  //   }
  //   setOpenMesage(false);
  // };

const handleCloseMessage = (): void => {
  setOpenMesage(false);
  console.log(handleCloseMessage);
};

  return (
    <Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      onClose={handleCloseMessage}
    >
      <Alert
        sx={{
              width: '487px',
              height: '104px',
              paddingTop: '20px',
              paddingLeft: '20px',
              backgroundColor: '#FDFDFD',
        }}
        icon={false}
        action={(
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={handleCloseMessage}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        )}
      >
        <AlertTitle sx={{ paddingRight:'80px' }}>
          <Typography variant='headings.h4'>title</Typography>
        </AlertTitle>
        <Typography variant='captions.default'>Insert message here</Typography>
      </Alert>
    </Snackbar>
  );
};

reactjs

来源：https://stackoverflow.com/questions/76260870/i-cant-close-the-alert-form-mui-using-the-crossicon

2条答案

按热度按时间

lf5gs5x21#

您的Snackbar由于open属性而打开。您不会在InfoMessage组件内部更改此状态。您可以从父组件向InfoMessage传递回调并更新状态。

function ParentComponent() {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <InfoMessage open={open} onClose={() => setOpen(false)} />
    </div>
  );
}

然后您可以在InfoMessage组件中使用该回调。

interface InfoMessageProps {
  open: boolean;
  onClose: () => void;
}

export const InfoMessage = ({ open, onClose }: InfoMessageProps) => {
  const [openMessage, setOpenMesage] = useState(false);

  return (
    <Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      onClose={onClose}
    >
      <Alert
        sx={{
          width: "487px",
          height: "104px",
          paddingTop: "20px",
          paddingLeft: "20px",
          backgroundColor: "#FDFDFD",
        }}
        icon={false}
        action={
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={onClose}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        }
      >
        <AlertTitle sx={{ paddingRight: "80px" }}>
          <Typography variant="headings.h4">title</Typography>
        </AlertTitle>
        <Typography variant="captions.default">Insert message here</Typography>
      </Alert>
    </Snackbar>
  );
};

赞(0）回复(0）举报 2023-05-17

o0lyfsai2#

import { useState, useEffect } from "react";
import { Alert, AlertTitle, Fade } from "@mui/material";

export default function AlertBox() {

  const [alertVisibility, setAlertVisibility] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setAlertVisibility(false);
    }, 3000);
  });

  return (
    <Fade in={alertVisibility} timeout={{ exit: 1000 }}>
      <Alert
        onClose={() => {
          setAlertVisibility(false);
        }}
        severity="success"
        variant="filled"
        sx={{
          minWidth: 300,
          position: "absolute",
          zIndex: 100,
          bottom: 10,
          right: 10,
        }}
      >
        <AlertTitle>Warning</AlertTitle>
        Message here
      </Alert>
    </Fade>
  );
};

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs 我无法使用crossIcon关闭警报窗体MUI

2条答案

相关问题

热门标签

最新问答