Reactjs 如何调用打开简单模式的函数？

我的问题可能更多地与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,
        }}
      >

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

导出默认函数转换模式（）{
const classes=useStyles（）；
const[open，setOpen]=React.useState（false）；
const handleOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(

带有相关代码的MainTable.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,
        }}
      >

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

const openPopup=rowData=>{
log（rowData.EBELN）；
TransitionsModal（）.setOpen（true）{
返回(


openPopup（rowData）}->调用openPopup
数据={query=>不相关
});
})
})
}
/>
);
};

我认为您可以尝试从您的

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

---

我认为您可以尝试从

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

---

您是否将

handleOpen

方法作为道具传递到您的

MainTable

组件中？不，将检查如何执行。您是否将

handleOpen

方法作为道具传递到

MainTable

组件中？不，将检查如何执行。似乎不起作用，需要定义handleOpen和useState。我还需要将行数据传递给模态，以便使用另一个API调用。

handleModel

在

MainTable

中声明，因此您可以将其作为道具传递给模态，您还可以将所需的任何

prop

传递到

TransitionModal

，因此如果需要

rowData

就可以轻松地通过组件传递它。如果组件似乎不起作用，则需要定义handleOpen和useState。我还需要将行数据传递给模态，以便使用另一个API调用。

handleModel

在

MainTable

中声明，因此您可以将其作为道具传递给模态，您还可以将所需的任何

prop

传递到

TransitionModal

，因此，如果需要

rowData

，可以轻松地通过组件传递它