Обрабатывать щелчок родительского элемента в дочернем компоненте - PullRequest
Новая
       14

Обрабатывать щелчок родительского элемента в дочернем компоненте

0 голосов
/ 24 октября 2019

По сути, у меня есть группа страниц, которые обычно отображаются в модальном режиме, но могут и не отображаться. У меня есть Manager компонент, который обрабатывает переход между ними через определенный поток, который нам нужен. У меня есть кнопка «Назад» в заголовке компонента MyModal, но при нажатии мне нужно как-то сказать Manager, чтобы вернуться на страницу. Но Manager ничего не знает о кнопке «Назад», а также страницы

ВОПРОС: Как я могу отправить событие или сделать что-то еще на Managerкомпонент, чтобы он знал, чтобы вернуться на страницу, когда я нажимаю BackButton?

Вот пример кода. 

const MyModal: React.FC = ({show, onHide}) => (
    <Modal show={show} onHide={onHide}>
        <BackButton onClick={/* What do I do here? */}/>
        <Modal.Body>
            <Manager {/* Do I put something here? */}/>
        </Modal.Body>
    </Modal>
);

const Manager: React.FC = () => {
    const [page, setPage]: [number, (d: number) => void] = useState(0);

    return (
        <>
            {[
                <Page1 onComplete={() => setPage(1)}/>
                <Page2 onComplete={() => setPage(2)}/>
                <Page3 onComplete={() => setPage(1)} onCancel={() => setPage(3)/>
                <Page4 onComplete={() => setPage(4)}/>
                <Page5 onComplete={() => setPage(1)}/>
            ][page]}
        </>
    );
};

PS * Modal и Modal.Bodyисходить из реакции-бутстрапа. Я думал, что это лучше проиллюстрировало идею держать их в себе.

Мысли, которые у меня были: Я понимаю, что мог бы просто соединить два вместе в один компонент, и это было бы хорошо вВ большинстве случаев, но мне интересно, если это возможно. Иметь огонь действия в отдельном компоненте, если это имеет смысл. Я как-то задумался об использовании ref, но я прочитал о них кучу, и я все еще в замешательстве. Я думал, что смогу каким-то образом передать ref кнопке в компонент Manager, но я не смог заставить это работать.

...