ReactJS 如何调用打开简单模态的函数？

Question

我的问题可能与 js 语法有关，但问题是，在 material-ui 中，我们收到了 Modal 函数的 js 代码，那么如何从另一个文件中调用要打开的模式单击按钮（在本例中为onRowClicked 在表格中）

带有相关代码的Modal.js文件是：

export default function TransitionsModal() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

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

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

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >

MainTable.js代码及相关代码为：

const openPopup = rowData => {
    console.log(rowData.EBELN);
    TransitionsModal().setOpen(true); <---- Trying to call the Modal and open it
}

const MainTable = props => {
    return (
      <div className="col-md-12">
        <div className="feed-toggle">
          <ul className="nav nav-pills outline-active">
          </ul>
        </div>
        <MaterialTable
            columns = {columnsSetup}
            options = {{ NOT_RELATED }}

            onRowClick={(event, rowData) => openPopup(rowData)} -> calls Open Popup

            data={query => NOT_RELATED
                    });
                  })
              })
            }
          />
      </div>
    );
  };

Answer 1

我认为您可以尝试从您的MainList 组件控制TransitionModal：

const MainTable = props => {
   const [showModal , setModal] = useState;

   const handleModal = status => {
     setModal(status); 
   }


    return (
      <div className="col-md-12">
        <TransitionsModal
         showModal={showModal} 
         handleModal={ handleModal }
        />
        <div className="feed-toggle">
          <ul className="nav nav-pills outline-active">
          </ul>
        </div>
        <MaterialTable
            columns = {columnsSetup}
            options = {{ NOT_RELATED }}

            onRowClick={(event, rowData) => openPopup(rowData)} -> calls Open Popup

            data={query => NOT_RELATED
                    });
                  })
              })
            }
          />
      </div>
    );
  };

在您的TransitionModal 组件中，您只需传递道具来控制它是否会显示“showModal”以及允许它关闭它的方法handleModal，检查我是否制作了一种可以处理打开和关闭，只需传递status 参数：

export default function TransitionsModal( { showModal, handleModal } ) {
  const classes = useStyles();

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={ showModal }
        onClose={ () => { handleModal(false) } }
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >