Question

我正在尝试创建一个可以使用不同道具“打开”的模式组件。一切正常（发送道具），只有一个例外。

我无法从父级打开模型。...如果我使用“子级”（模态）按钮，则效果很好，如果我尝试使用父级按钮，我将无能为力。模态就是这个-> https://material-ui.com/utils/modal/

我尝试过将“开放”道具从父母发送给孩子，但这搞砸了所有事情（因为在我看来，很多模式已打开并无法关闭它们）。

这是它的样子。

模式（子级）组件->

            <Modal
                aria-labelledby="simple-modal-title"
                aria-describedby="simple-modal-description"
                open={this.props.open}
                onClose={this.handleClose}
            >

从我的父组件（页面上的帖子）中，我已经尝试过->

                <Modal modalTitle={post.acf.title} open={this.state.modalOpen}/>

我在父母中将状态定义为modalopen: false，但我总是在模态上得到一个错误，说该道具是未定义的，除非我也添加了

PortModal.defaultProps = { open: false, }

如果我签入React DevTools，我可以看到我的模态是用open={false}创建的，而且他们也正确发送了模态标题（有效）。

我不明白为什么模态会打开1000次而我无法关闭它们。

是否有任何方法可以使道具与道具配合使用？或者还有其他我应该尝试的方法吗？我尝试使用裁判，但我不确定自己做对了。

谢谢。

使用更多代码和gif更新。

我当前的创建方式几乎相同，但是我还通过了close处理程序。

在componentDidMount

const MyModal = <Modal modalTitle={this.state.title} open={this.state.modalOpen} openHandler={this.handleOpen}/>
        this.setState({
            MyModal
        });

在render()中，我只是返回该常量。

const { MyModal } = this.state;
<div>
   {MyModal}
</div>

我的模态看起来像这样->

  <div>
    <Typography gutterBottom>Click to get the full Modal experience!</Typography>
    <Button onClick={this.props.openHandler}>Open Modal</Button>
    <Modal
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      open={this.props.open}
      onClose={this.props.closeHandler}
    >
      <div style={getModalStyle()} className={classes.paper}>
        <Typography variant="title" id="modal-title">
          Text in a modal
        </Typography>
        <Typography variant="subheading" id="simple-modal-description">
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
        </Typography>
        <PortModalWrapped />
      </div>
    </Modal>
  </div>

因此，它几乎是上面链接中的默认卡。

我尝试通过单击模式按钮或我父母中的另一个按钮来调用它，看起来像这样->

<Button size="small" color="primary" onClick={openModal(post.acf.title)}>

函数是

const openModal = (title) => {
    this.setState({
        title: title,
        openModal: true,
    });
};

所有按钮都不起作用（我知道我没有发送closehandler，因为我无法打开模式，所以它甚至都无法测试）。

每当我单击任何一个按钮时，它的确会有一个奇怪的故障（滚动条快速出现或消失，就像它会改变状态或改变一样）。

React Material UI Modal-无法从父级访问

0 个答案: