Как закрыть диалог в другом компоненте из Material-UI в React?

Question

У меня есть модал, внутри которого есть компонент.Я хочу закрыть модальный от этого компонента.

Я получил компонент, который имеет:

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

Возможно закрыть модальный внутри ClientsTable?

Answer 1

В соответствии с https://material -ui.com / api / modal / , вы можете управлять открытием и закрытием модального режима через опору open в компоненте.

Следовательно, вы можете определить переменную состояния в вашем модальном компоненте state = { open: false }

и функция для его закрытия closeModal = () => { this.setState({ open: false }); }

и вы можете передать функцию closeModal в качестве опоры дочернему компоненту внутри модального

<ClientsTable closeModal={closeModal} />. Затем вы можете запустить функцию closeModal в любом месте внутри компонента <ClientsTable>.

Вот пример: https://codesandbox.io/s/material-demo-7nc1p

Answer 2

Поскольку вы уже используете 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>

Демо

Answer 3

Похоже, 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>
)