最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin7浏览0评论

I am using the Material UI Modal ponent in my React app, and it will take up the majority of the screen (about 95%). As a result, I would like to give users a more intuitive way of closing the modal by adding a small "X" icon in the upper right of the modal and allowing that to close it. I am passing the same handleClose function down to this icon as I am to the Modal itself, but the function isn't even getting called when I click the icon. I checked all the props and the function is getting passed down correctly, it just isn't getting evaluated on the CloseIcon ponent's 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=".svg"
                link=""
              />
            </FlexContainer>
          </BodyContainer>

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

CloseIcon.js

const CloseIcon = props => (
  <Circle justify="center" alignItems="center">
    <Icon
      viewBox="0 0 26 26"
      xmlns=""
      xmlnsXlink=""
    >
      <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>
);

How can I make this CloseIcon ponent actually call the handleClose function and close the modal?

EDIT: I added the CloseIcon.js ponent here for reference. However, the onClick event is firing correctly -- I tested this by replacing the handleClose function with a simple console.log and it fired appropriately on click.

I am using the Material UI Modal ponent in my React app, and it will take up the majority of the screen (about 95%). As a result, I would like to give users a more intuitive way of closing the modal by adding a small "X" icon in the upper right of the modal and allowing that to close it. I am passing the same handleClose function down to this icon as I am to the Modal itself, but the function isn't even getting called when I click the icon. I checked all the props and the function is getting passed down correctly, it just isn't getting evaluated on the CloseIcon ponent's 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./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/2000/svg"
      xmlnsXlink="http://www.w3/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>
);

How can I make this CloseIcon ponent actually call the handleClose function and close the modal?

EDIT: I added the CloseIcon.js ponent here for reference. However, the onClick event is firing correctly -- I tested this by replacing the handleClose function with a simple console.log and it fired appropriately on click.

Share Improve this question edited Nov 30, 2019 at 17:45 ipenguin67 asked Nov 30, 2019 at 5:07 ipenguin67ipenguin67 1,6596 gold badges24 silver badges45 bronze badges 5
  • 1 Trying removing onClose={handleClose} from your <Modal> ponent – junwen-k Commented Nov 30, 2019 at 7:21
  • please post your import for CloseIcon, that might be the issue – Ido Commented Nov 30, 2019 at 12:35
  • @Ido I edited the post with the ponent, but I don't think it's related to that since I tested the onClick event with a generic console.log and that fired appropriately. – ipenguin67 Commented Nov 30, 2019 at 17:47
  • @dev_junwen I tried this and it did not work, but I'm not sure it would be the ideal scenario anyway since I'd still like for users to be able to close the modal by clicking outside of it in addition to the close icon. – ipenguin67 Commented Nov 30, 2019 at 17:47
  • I thought your close icon was from @material-ui/icons haha. Didn't know it was a custom icon. – junwen-k Commented Nov 30, 2019 at 18:50
Add a ment  | 

1 Answer 1

Reset to default 4

Your CloseIcon ponent doesn't handle onClick event.
add onClick prop to Circle or Icon

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

or

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论