我怎样才能使用 X 图标关闭 Material UI 模态框而不是仅仅通过在模态框外单击？

Question

我在我的 React 应用程序中使用 Material UI 模态组件，它将占据大部分屏幕（大约 95%）。因此，我想通过在模态框右上角添加一个 "X" 小图标并允许其关闭模态框，为用户提供一种更直观的关闭模态框的方式。我将相同的 handleClose 函数向下传递给此图标，就像我传递给模态框本身一样，但是当我单击该图标时甚至没有调用该函数。我检查了所有的道具，函数被正确传递，只是没有在 CloseIcon 组件的 onClick 上进行评估。

Page.js

const Page = props => {

  const [open, setOpen] = React.useState(false);

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

  const handleClose = () => {
    console.log('testing')
    setOpen(false);
  };

  return (
    <>
      <Button type="button" onClick={handleOpen} buttonText="Add Meal" />

      <ModalContainer
        open={open}
        handleClose={handleClose}
      >
      </ModalContainer>
    </>
  )
};

ModalContainer.js

const ModalContainer = ({
  open,
  handleClose,
  ...props
}) => {

  return (
    <div>
      <Modal
        open={open}
        onClose={handleClose}
      >
        <StyledDialogContent>
          <ModalContent handleClose={handleClose} />
        </StyledDialogContent>

      </Modal>
    </div>
  )
};

ModalContent.js

class ModalContent extends React.Component {

  render() {
    const { handleClose } = this.props;
    return (

      <Container justify="center" alignItems="center">
        <ModalBody flexDirection="column" >
          <TopBar justify="flex-end" alignItems="center">
            <CloseIcon onClick={handleClose} />
          </TopBar>
          <BodyContainer>
            <FlexContainer>
              <RecipeCard />
            </FlexContainer>
            <FlexContainer>
              <MenuCard
                title="Custom Food"
                icon="https://nutriology-storage.s3.amazonaws.com/Custom-Food.svg"
                link=""
              />
            </FlexContainer>
          </BodyContainer>

        </ModalBody>
      </Container>
    )
  }
};

CloseIcon.js

const CloseIcon = props => (
  <Circle justify="center" alignItems="center">
    <Icon
      viewBox="0 0 26 26"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <g id="Style-Guide" stroke="none" strokeWidth="1" fillRule="evenodd">
        <g
          id="Style-Guide---Elements"
          transform="translate(-198.000000, -5239.000000)"
          strokeWidth="1.5"
        >
          <g
            id="Remove-X-icon-Default"
            transform="translate(199.000000, 5240.000000)"
          >
            <g
              id="Group"
              transform="translate(12.000000, 12.000000) rotate(-315.000000) translate(-12.000000, -12.000000) translate(6.000000, 6.000000)"
              strokeLinecap="round"
            >
              <path d="M0,6 L12,6" id="Line-2"></path>
              <path d="M6,0 L6,12" id="Line-2-Copy"></path>
            </g>
          </g>
        </g>
      </g>
    </Icon>
  </Circle>
);

如何让这个 CloseIcon 组件真正调用 handleClose 函数并关闭模态框？

编辑：我在此处添加了 CloseIcon.js 组件以供参考。但是，onClick 事件正确触发——我通过用简单的 console.log 替换 handleClose 函数来测试它，它在点击时正确触发。

Answer 1

您的 CloseIcon 组件不处理 onClick 事件。
将 onClick 属性添加到 Circle 或 Icon

  <Circle onClick={props.onClick} justify="center" alignItems="center">

或

 <Icon
      onClick={props.onClick}
      viewBox="0 0 26 26"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >

我怎样才能使用 X 图标关闭 Material UI 模态框而不是仅仅通过在模态框外单击？

How can I close a Material UI Modal using an X icon rather than just by clicking outside the modal?

javascript

modal-dialog

reactjs

material-ui