How can I open Material UI Modal from parent component?

问题

This is my parent component:

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

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

This is my child component:

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>
  );
};

So, basically, how can I open modal from parent component? Should I pass a prop or handle open state in some other matter?

Also, can this be done with a tag? I need to use it to keep it in the same line, and this is not real-world scenario, but you'll get the point. :)

Thank you.

回答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>
        );

In Modal set props attributes like this to set open and 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>

回答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>
    )
}

Child Modal

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>
);
};

来源：https://stackoverflow.com/questions/60474776/how-can-i-open-material-ui-modal-from-parent-component

标签

javascript

html

reactjs

material-ui