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

我认为您可以尝试通过TransitionModal组件控制MainList：


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，请检查是否已创建IVE。只需传递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,
        }}
      >

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

1 个答案: