如何实现选择导航链接后自动关闭Mantine Burger组件

我希望在模态框中选择导航选项后，自动关闭Mantine Burger组件，但目前该组件无法自动关闭（关闭图标仍显示）。项目基于NextJS、Mantine及react-icons开发。

代码片段 #

export default function HeaderMiddle({ links }: HeaderMiddleProps) {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const dark = colorScheme === 'dark';

  const [opened, { toggle, open, close }] = useDisclosure(false, {
    onOpen: () => burgerClick(),
    onClose: () => closeAllModals(),
  });
  const [active, setActive] = useState(links[0].link);
  const { classes, cx } = useStyles();

  const items = links.map((link) => (
    <a
      key={link.label}
      href={link.link}
      className={cx(classes.link, {
        [classes.linkActive]: active === link.link,
      })}
      onClick={(event) => {
        event.preventDefault();
        setActive(link.link);
      }}
    >
      {link.label}
    </a>
  ));

  const burgerItems = links.map((link) => (
    <a
      key={link.label}
      href={link.link}
      className={cx(classes.link, {
        [classes.linkActive]: active === link.link,
      })}
      onClick={(event) => {
        event.preventDefault();
        setActive(link.link);
        closeAllModals();
      }}
    >
      {link.label}
    </a>
  ));

  const burgerClick = () => {
    openModal({
      title: 'Subscribe to newsletter',
      children: <> {burgerItems} </>,
    });
  };

  return (
    <Header height={56} mb={120}>
      <Container className={classes.inner}>
        <Burger
          opened={opened}
          onClick={toggle}
          size="sm"
          className={classes.burger}
        />
        <Group className={classes.links} spacing={5}>
          {items}
        </Group>

        {/* <MantineLogo size={28} /> */}

        <Group spacing={0} className={classes.social} position="right" noWrap>
          ...
        </Group>
      </Container>
    </Header>
  );
}

项目版本 #

• next: 12.1.5
• @mantine/core: 4.2.12

问题核心是点击模态框内的导航选项时，仅关闭了模态框，但未更新Burger组件绑定的opened状态。只需在点击事件中同时调用useDisclosure提供的close()方法，即可重置Burger的展开状态。

修改burgerItems的点击逻辑，添加close()调用：

const burgerItems = links.map((link) => (
  <a
    key={link.label}
    href={link.link}
    className={cx(classes.link, {
      [classes.linkActive]: active === link.link,
    })}
    onClick={(event) => {
      event.preventDefault();
      setActive(link.link);
      closeAllModals();
      close(); // 新增：关闭Burger的展开状态
    }}
  >
    {link.label}
  </a>
));

修改后，点击模态框中的导航选项时，会同时关闭模态框并将Burger组件的状态重置为关闭，图标也会从关闭样式变回汉堡样式。

内容的提问来源于stack exchange，提问作者soupCodez