React.js:如何从代码中关闭headlessui披露模式？

Question

我在尝试关闭面板内的headlessui Disclosure modal时遇到问题。我的目标是在面板内有一个按钮，可以关闭模式。

我试图解决这个问题的方法是使用useRef手动完成，但它部分有效。

在第一次打开panel后，您可以关闭modal，但如果您尝试再次打开它，它将不起作用。

不知道如何解决这个问题。

任何帮助都将不胜感激。

Here is the codesandbox link

下面是代码

import { Disclosure } from "@headlessui/react";
import React, { useState, useRef } from "react";

import CloseIcon from "@material-ui/icons/Close";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const App = () => {
  const [isClosed, setIsClosed] = useState(false);

  const modalRef = useRef(null);
  const hideModalHandler = (e) => {
    e.preventDefault();
    modalRef.current?.click();
    setIsClosed(!isClosed);
  };

  return (
    <Disclosure>
      {({ open }) => (
        <div ref={modalRef}>
          <Disclosure.Button>
            <span>modal</span>
            <ExpandMoreIcon />
          </Disclosure.Button>

          {!isClosed && (
            <Disclosure.Panel>
              <CloseIcon onClick={hideModalHandler} />
              <div>name</div>
            </Disclosure.Panel>
          )}
        </div>
      )}
    </Disclosure>
  );
};

export default App;

Answer 1

我没有使用过headlessui Disclosure，但我看到函数hideModalHandler实际上并没有隐藏，而是在切换。你是指setIsClosed(true)而不是setIsClosed(!isClosed)吗？

另外，在快速浏览文档之后，您是否尝试过从headlessui Disclosure使用close？你不需要useRef

Answer 2

使用状态，并将披露按钮包装到一个带有onClick和一些ID字符串的DIV中，以标识必须打开的披露。如下所示(适用于多个公开)：

const [keyOfOpenDisclosure, setKeyOfOpenDisclosure] = useState('')

const toggleDisclosure = (key: string) => {
    setKeyOfOpenDisclosure((prev) => (prev !== key ? key : ''))
}

...

<Disclosure>
    <div onClick={() => toggleDisclosure(someId)}>
        <Disclosure.Button>
            Text of disclosure button
        </Disclosure.Button>
    </div>
    <Transition
      show={someId === keyOfOpenDisclosure}
...