时间戳

首页 > 解决方案 > 从数据库中删除某些内容时如何打开物化确认模式

reactjs - 从数据库中删除某些内容时如何打开物化确认模式

问题描述

目前，我有一个显示数据库中所有文档的视图。每个都有一个按钮，用于触发要从数据库中删除的文档。

理想情况下，我想打开一条模式消息（使用 Materialize）以确保应该删除。

我知道我可以为每个元素设置一个模态，但这似乎是多余的，而且太多了。我希望流程来自：

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 和 Materialize 的新手，因此我们将不胜感激，如果需要更多信息，请告诉我 :)

谢谢，詹姆斯

标签： reactjsreact-reduxmaterialize

解决方案

好的，所以我自己找到了解决方案，由于我在网上找不到太多关于如何做到这一点的其他内容，所以我想我也会分享解决方案。

所以，我首先安装了 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;

推荐阅读