Reactjs 如何从React中的材质UI关闭另一个组件中的对话框？

我有一个模态，里面有一个组件。 我想从该组件关闭模态

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

我有一个组件，它有：

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

---

可以在ClientsTable中关闭模式吗？

看起来关闭模式的是

HandleCloseModalClient

，因此您只需要将其传递到ClientsTable并以某种方式调用它。例如，如果您在ClientsTable中有一个按钮：

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable onCloseModal={handleCloseModalClients} />
   </div>
</Modal>

const ClientsTable = (props) => (
  // Not sure what the inside of ClientsTable looks like, but
  // it should have something you can attach the handler to:
  <div>
    <button onClick={props.onCloseModal}>Close Modal</button>
  </div>
)

常量ClientsTable=（道具）=>(
//不确定ClientsTable的内部是什么样子，但是
//它应该具有可以将处理程序附加到的内容：
闭合模态
)

根据，您可以通过组件中的

open

道具控制打开和关闭模态

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

因此，可以在模态组件中定义状态变量

state={open:false}

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

和一个函数来关闭它

closeModal=（）=>{this.setState（{open:false}）；}

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

您可以将closeModal函数作为道具传递给模态内部的子组件

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

。然后，您可以在

组件内的任何位置触发closeModal函数

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

---

下面是一个示例：

因为您已经在使用

open={modalClients}

，并且假设您的

modalClients

必须处于一种状态。您可以将此状态设置为

false

以从

ClientsTable

组件关闭

modal

，例如

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

const ClientsTable = props => (
  <div>
    <button onClick={props.hideModal}>Hide</button>
  </div>
);

constclientstable=props=>(
隐藏
);

你的语气应该是这样的

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

<Modal open={this.state.modalClients}>
    <div className="">
       <ClientsTable hideModal={() => this.setState({ modalClients: false })} />
    </div>
</Modal>

this.setState（{modalClients:false}）}/>

---

在您的示例中，它会自动关闭。你所要做的就是点击窗口外的任何地方。如何使其保持打开状态，并仅在单击“关闭”时关闭？我的例子是有相反的问题。它将保持打开状态，但当您单击“关闭”时，它将保持打开状态（即使正在调用setOpen（false）函数）。这令人困惑。

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>