如何使用 X 图标而不是仅通过在模态外单击来关闭 Material UI 模态？

Question

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

页面.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>
    </>
  )
};

模态容器.js

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

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

      </Modal>
    </div>
  )
};

模态内容.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>
    )
  }
};

关闭图标.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"
    >