Quasy模式组件不会隐藏自身

我有这个组件，它应该作为某种额外的输入对话框工作。在块的编辑功能中导入。

/**
 * Component for entering biography
 */

import { InnerBlocks } from \'@wordpress/block-editor\';
import { Button } from \'@wordpress/components\';
import { useState } from \'@wordpress/element\';



const BiographyModal = ({ name }) => {
    const [ isOpen, setIsOpen ] = useState(false);
    const modal =
        <div className="biography-modal">
            <h3>{ `Životopis ${ name }` }</h3>
            <InnerBlocks />
            <Button isDefault onClick={ () => setIsOpen({ isOpen: false }) }>
                Završi uređivanje
            </Button>
        </div>;

    return (
        <div>
            <Button isDefault onClick={ () => setIsOpen({ isOpen: true }) }>Uredi životopis</Button>
            { isOpen && modal }
        </div>
    )
}

export default BiographyModal;

它会在代码中较低的按钮上打开，但在代码中单击较高的按钮时不会关闭。当我在浏览器中使用React developer工具更改isOpen的状态时，它甚至不会关闭。起初我认为这是因为不允许卸下内部块或按钮，但在我移除这两个之后（并允许较低的按钮作为切换按钮使用(setIsOpen({ isOpen: ! isOpen })), 这仍然无法关闭。有什么线索吗？

相关推荐