Как открыть Material UI Modal из родительского компонента?

Question

Это мой родительский компонент:

import React from 'react';
import ChildModal from 'ChildModal';

const ParentComponent = () => (
  <div>
    <span>Click </span>
    <a>HERE TO OPEN MODAL</a>
  <div>
);

Это мой дочерний компонент:

import React, { useState } from "react";
import { Modal, Backdrop, Fade } from "@material-ui/core";

const ChildModal = () => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        react-transition-group
      </button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className="modal"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500
        }}
      >
        <Fade in={open}>
          <div className="paper">
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">
              react-transition-group animates me.
            </p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
};

Итак, в принципе, как я могу открыть модальный из родительского компонента? Должен ли я передать опору или обработать состояние open в каком-либо другом вопросе?

Кроме того, это можно сделать с помощью тега a? Мне нужно использовать его, чтобы держать его в одной строке, и это не сценарий реального мира, но вы поймете, в чем суть. :)

Спасибо.

Answer 1

import React from 'react';
import ChildModal from 'ChildModal';

const ParentComponent = () => (

      const [open, setOpen] = useState(false);

      const handleOpen = () => {
        setOpen(true);
      };

      const handleClose = () => {
        setOpen(false);
      };

      return (
          <div>
            <input type="button" onClick={handleOpen}>CLICK HERE TO OPEN MODAL</input>
            <ChildModal open={open} onClose={handleClose}
          <div>
        );

В Modal установить атрибуты реквизита, как это, чтобы установить open и handleClose:

<Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className="modal"
        {...props}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
        timeout: 500
        }}
    >
        <Fade in={this.props.modalState}>
        <div className="paper">
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">
            react-transition-group animates me.
            </p>
        </div>
        </Fade>
    </Modal>

Answer 2

import React from 'react';
import ChildModal from 'ChildModal';

const ParentComponent = () => {
    const [open, setOpen] = useState(false);
    return (
        <div>
            <span>Click </span>
            <a onClick={ (e)=> { e.preventDefault();setOpen(true); } }>HERE TO OPEN MODAL</a>
            <ChildModal setModalOpen={setOpen} modalState={open} />
        <div>
    )
}

Детский модал

import React, { useState } from "react";
import { Modal, Backdrop, Fade } from "@material-ui/core";

const ChildModal = (props) => {

return (
    <div>
    <button type="button" onClick={ props.setModalOpen(true) }>
        react-transition-group
    </button>
    <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className="modal"
        open={ props.modalState }
        onClose={ props.setModalOpen(false) }
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
        timeout: 500
        }}
    >
        <Fade in={ props.modalState }>
        <div className="paper">
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">
            react-transition-group animates me.
            </p>
        </div>
        </Fade>
    </Modal>
    </div>
);
};