Как открыть модальное окно подтверждения материализации при удалении чего-либо из базы данных

Хорошо, я сам нашел решение, и, поскольку я не мог найти в Интернете больше информации о том, как это сделать, я подумал, что тоже поделюсь этим решением.

Итак, я сначала установил react-materialize и создал компонент для хранения модального окна и рендеринга модального окна.

Я заменил функцию нажатия кнопки функцией, которая обновляет состояние текущего компонента следующим образом:

const handleClick = category => {
      this.setState({
        categoryClicked: category,
        modalOpen: true
      });
    };

Затем я привязал компонент, содержащий модель, к этому состоянию, используя такие свойства:

<ConfirmDeletion
          onClickYes={null}
          onClickNo={null}
          name={this.state.categoryClicked.name}
          open={this.state.modalOpen}
          actions={[
            <button
              onClick={modalNo}
              className="modal-close waves-effect waves-green btn-flat"
            >
              No
            </button>,
            <button
              onClick={modalYes}
              className="modal-close waves-effect waves-green btn-flat"
            >
              Yes
            </button>
          ]}
        />

Обратите внимание, что действия представляют собой список элементов JSX, которые должны быть кнопками в модальном окне. Я также создал обработчики событий щелчка для обновления состояния (и удаления из базы данных в случае «да») следующим образом:

const modalYes = () => {
      this.props.deleteCategory(this.state.categoryClicked._id);
      this.setState({
        modalOpen: false
      });
    };
const modalNo = () => {
      this.setState({
        modalOpen: false
      });
    };

и просто для полноты, вот компонент, обертывающий модальное окно на случай, если он пригодится кому-либо в будущем:

import React, { Component } from "react";
import { Modal } from "react-materialize";

class ConfirmDeletion extends Component {
  render() {
    const { name, open, actions } = this.props;
    return (
      <Modal
        id="confirmDeletion"
        open={open}
        actions={actions}
        header="Are you sure?"
      >
        <div className="modal-content">
          <p>
            Are you sure you want to do delete '{name}'? It cannot be undone.
          </p>
        </div>
      </Modal>
    );
  }
}

export default ConfirmDeletion;

На основе Материализовать документацию, вы должны выполнить следующие действия:

1- Создайте свою модальную структуру. Например :

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

2- Инициализируйте модальное окно:

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems, options);
});

Примечание: удалите options, если вы не хотите добавлять модальные параметры. В противном случае это вызывает ошибку.

3- Измените функцию handleClick, чтобы открыть модальное окно:

const handleClick => {
  //var elem = get modal element here
  var instance = M.Modal.getInstance(elem);
  instance.open();
};

4- Наконец, вызовите функцию, когда пользователь щелкнет agree, чтобы удалить категорию. Вы можете добавить кнопку disagree для закрытия модального окна с помощью:

instance.close();