如何从父组件打开模态并让关闭操作重置父组件以便模态可以再次打开

Question

我在这里看到过类似的问题，但我对 React 比较陌生，我的应用程序使用的是功能组件，而不是类我能找到的大多数示例。所以我找到的答案对我来说很难适应。

这是我的问题，我有一个通过切换状态变量来显示模态的父组件，一切正常，直到我从模态中关闭模态。在那种情况下，我必须按两次父按钮才能再次打开它，因为我必须切换到 false 然后再切换到 true。

这显然不是正确的方法，但我已经尝试将不同的东西传递给模态，例如 setState()，但我无法让它工作。我正在使用 semanti-ui-react

父组件代码：

import React, { useState } from "react";
import { Button } from "semantic-ui-react";
import { ModalComponent } from "/imports/ui/ModalComponent";

export const MyDashboard = () => {
    const [openModal, setOpenModal] = useState(false);

    const handleOpenModal = () => {
        setOpenModal(!openModal);
    }

    return (
        <div>
            <Button
               onClick={ handleOpenModal }
               content="Open Modal"
               color="green"
             />
            {openModal &&
                <ModalComponent
                />
                }

        </div>
  )};

模态组件代码：

import React, {useState} from "react";
import {Modal, Button} from "semantic-ui-react";

export const ModalComponent = () => {
    const [isOpen, setIsOpen] = useState(true);

    // enable form items as this functionality becomes available
    return (
        <Modal
            onClose={() => setIsOpen(false)}
            onOpen={() => setIsOpen(true)}
            open={isOpen}
        >
            <Modal.Header>A modal is showing</Modal.Header>            
                <Modal.Actions>
                    <Button
                        content="Save"
                        color='green'
                        onClick={() => {                            
                            setIsOpen(false);
                            }
                        }
                    />
                    <Button color='black' onClick={() => setIsOpen(false)}>
                        Cancel
                    </Button>
                </Modal.Actions>
        </Modal>
    );
};

我想我必须来回传递一些状态，但我不确定如何。

Answer 1

试试这个：

父组件：

<ModalComponent toggleModal={handleOpenModal} />

模态组件：

export const ModalComponent = ({toggleModal}) => {
    ...your codes

    toggleIt = () => {
        setIsOpen(false);
        toggleModal();
    }

    return (
        ...your codes

        <Button color='black' onClick={toggleIt} />
             Cancel
        <Button>

        ...your codes
     );
}

如何从父组件打开模态并让关闭操作重置父组件以便模态可以再次打开

How to open a modal from a parent component and have the close action reset the parent component so that the modal can open again

javascript

reactjs

semantic-ui-react