Question

我有一个内部有组件的模态。我想从该组件关闭模式。

我的组件具有：

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

是否可以关闭ClientsTable中的模式？

Answer 1

看起来handleCloseModalClients可以关闭模式，因此您只需要将其传递到ClientsTable并以某种方式调用即可。例如，如果您在ClientsTable中有一个按钮：

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

Answer 2

根据https://material-ui.com/api/modal/，您可以通过组件中的open道具来控制模态的打开和关闭。

因此，您可以在模态组件中定义状态变量 state = { open: false }

和关闭它的功能closeModal = () => { this.setState({ open: false }); }

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

<ClientsTable closeModal={closeModal} />。然后，您可以在<ClientsTable>组件内的任意位置触发closeModal函数。

这里是一个示例：https://codesandbox.io/s/material-demo-7nc1p

Answer 3

由于您已经在使用open={modalClients}，并且假设您的modalClients必须处于一种状态。您可以将此状态设置为false，以从modal组件中关闭ClientsTable，例如

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

您的模态应该看起来像

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

Demo

如何在React的Material-UI中关闭另一个组件中的对话框？

3 个答案: