如何使用 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

如果我理解你想要实现的目标：

您可以为显示或不显示的弹出窗口创建一些状态。这将是一个布尔值。
将初始状态设置为 false。
创建一个方法，当您单击按钮时，它会切换状态为真。
当状态为真时，显示弹窗。

然后根据您的应用程序结构将该方法传递给您的按钮。

class Example extends React.Component {
  constructor() {
      super();
      this.state = {
          isPopupShown: false
      }

     this.togglePopup = this.togglePopup.bind(this);
  }


  togglePopup() {
    this.setState(prevState => ({
      isPopupShown: !prevState.isPopupShown
    }));
  }

  render() {
    return (
      <div>
        <button onClick={ this.togglePopup }>
          toggle popup
        </button>
        { this.state.isPopupShown === true ? <div>popup shown!</div> : <div>popup hidden!</div> }
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.querySelector("#app"))

这是一个 jsfiddle，显示了如何切换某些内容：http://jsfiddle.net/n5u2wwjg/100862/

Answer 2

使用 confirm 而不是 alert 或 sweetAlert:

delete(Code) {
    if( confirm('Sure want to delete?')) {
        axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {

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

else {
        // Do something..
    } }.bind(this));

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

Answer 3

就在上周，我为 SweetAlert2 创建了自己的 React 包装器组件。（NPM 上已经有一些包装器类，但我不喜欢它们的工作方式，所以我自己做了一个。）下面的 link 是一个功能齐全的示例) 我的 SweetAlert2 包装器组件，以及 B) 两种不同的方式来根据用户输入启动警报。

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

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

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

How to create a popup on click delete button with ReactJS?

javascript

popup

popupwindow

reactjs

sweetalert