javascript - 如何使用 ReactJS 创建点击删除按钮时的弹出窗口？

Question

我希望当我单击删除按钮时，它会打开一个确认弹出窗口。我尝试使用 sweetAlert，但它没有显示任何弹出窗口。

popupdel方法:

 popupdel() {
    swal({
      title: "Are you sure?",
      text: "Your will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonClass: "btn-danger",
      confirmButtonText: "Yes, delete it!",
      closeOnConfirm: false
    }, function() {
      swal("Deleted!", "Your imaginary file has been deleted.", "success");
    });
  }

删除方法:

delete(Code) {

axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {

this.setState({ clients: clients.records });

}.bind(this));

}

<button style={btn} onClick={(Code) => this.delete(client.Code)} type="button"><i class="fa fa-trash-o"></i></button>

如何让弹出窗口显示在单击按钮上？

Answer 1

就在上周，我为 SweetAlert2 创建了自己的 React 包装组件。 (NPM 上已经有一些包装器类，但我不喜欢它们的工作方式，所以我自己做了一个。)以下链接是 A) 我的 SweetAlert2 包装器组件和B) 根据用户输入启动警报的两种不同方式。

https://stackblitz.com/edit/react-sweetalert2-wrapper

链接的示例展示了如何以声明方式启动警报(例如，在 render() 函数中拼出 JSX 代码，然后在状态中切换 show 变量)，或命令式(例如，在 render() 函数内为警报保留一个占位符，该函数动态填充 null 或新生成警报的内容)。