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

Question

В настоящее время у меня есть вид, который показывает все документы из базы данных.У каждого есть кнопка, которая вызывает удаление документа из базы данных.

В идеале, я хотел бы открыть модальное сообщение (используя Materialize), чтобы гарантировать, что удаление должно произойти.

Iзнаю, что у меня может быть модальный для каждого из элементов, но это кажется избыточным и слишком много, чтобы добавить.Я бы хотел, чтобы поток шел от:

button -> delete

до:

button -> confirm -> delete

Я бы хотел, чтобы это произошлоизменение onClick кнопки, чтобы открыть модальный режим и иметь возможность пропустить действие кнопки подтверждения через

Код кнопки в настоящее время выглядит следующим образом:

<button
    className="btn"
    onClick={() => {handleClick(category._id);}}
>
Delete
</button>

Текущий обработчик onClick для каждогоКнопка следующая:

const handleClick = id => {
  this.props.deleteCategory(id);
};

Я новичок в React / Redux и Materialise, поэтому любая помощь будет оценена, и если потребуется дополнительная информация, пожалуйста, дайте мне знать:)

Спасибо, Джеймс

Answer 1

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

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

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

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

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

<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, которые должны быть кнопками на модальной панели.Я также создал обработчики событий click для обновления состояния (и удаления из базы данных в случае «да») следующим образом:

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;

Answer 2

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

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