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

Posted 2023-02-22

【中文标题】ReactJS 如何调用打开简单模态的函数？

【英文标题】：ReactJS How to call a function that opens a simple modal?

【发布时间】：2020-03-29 11:34:44

【问题描述】：

我的问题可能与 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>
    );
  ;

【问题讨论】：

您是否将handleOpen 方法作为道具传递给您的MainTable组件？

不行，去看看怎么做。

【参考方案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,
        
      >

【讨论】：

好像不行，需要定义handleOpen和useState。我还需要将 rowData 传递给 Modal 以便使用另一个 API 调用。

handleModal 在MainTable 声明，因此您可以将其作为道具传递给您的模态，您也可以将任何您需要的prop 传递给TransitionModal，所以如果您需要 rowData 很容易通过组件传递它