Question

我在使用react-bootstrap-sweetalert库时有问题。实际上，它工作正常，直到互联网连接缓慢。当某人尝试单击“提交”按钮时，由于互联网速度较慢（我正在通过“网络部分[Slow 3G]”进行模拟），警报在单击按钮后的时间并不是完全关闭，而是在几秒钟后关闭。因此，某人可能多次单击提交按钮。这是一个问题，因为几个相同的请求可以流到后端和数据库。在其他不使用库的部分中，我可以在处理states之后“禁用”反应onClick。

问题是-在处理react-bootstrap-sweetalert函数之后，禁用onConfirm库中的按钮。代码：

  handleSubmitInvoice = () => {
    this.setState({
      sweetalert: (
        <SweetAlert
          warning
          showCancel
          confirmBtnText={this.state.alert.label.sure}
          cancelBtnText={this.state.alert.label.cancel}
          confirmBtnBsStyle="success"
          cancelBtnBsStyle="default"
          disabled={disableButton}
          title={this.state.alert.label.areyousure}
          onConfirm={() => this.submit()}
          onCancel={() => this.hideAlert()}
        >
          {this.state.alert.confirmSubmit}
        </SweetAlert>
      )
    });
  };

在render（）中：

          <button
              className="btn btn-success btn-sm"
              onClick={this.handleSubmitInvoice}
           >   
              submit
          </button>

提交功能：

  submit = () => {
    const req = { invoice: this.state.invoiceNumber };
    Axios.post("/api", req)
      .then(() => {
        this.props.history.push({
          pathname: "/mypathname",
          state: {
            fromSubmitInvoice: true
          }
        });
      })
      .catch(err => {
        Alert.error(
          err.response.data.code === "internal_error"
            ? this.state.alert.raiseError
            : err.response.data.text,
          {
            position: "top-right",
            effect: "bouncyflip",
            timeout: 2000
          }
        );

        this.hideAlert();
      });
  };

代码沙箱：https://codesandbox.io/s/sweet-alert-problem-ktzcb 预先感谢。

Answer 1

在您的情况下，由于您要将Sweetalert组件分配为sweetalert状态，因此您需要具有一个控制禁用状态的本地状态，但是为了简单起见，您可以使{ {1}}状态控件sweetalert组件的可见性/状态，如下所示：

Sweetalert

您可以在此沙箱https://codesandbox.io/s/sweet-alert-problem-lv0l5

中看到它

P.S。我在提交中添加了handleSubmitInvoice() { // just set sweetalert to true to show the Sweetalert component this.setState({ sweetalert: true }); } render() { const { sweetalert, disableButton } = this.state; return ( <div style={{ padding: "20px" }}> // this makes disableButton reactive and pass it automatically to Sweetalert component {sweetalert && ( <SweetAlert warning showCancel confirmBtnText="confirmBtnText" cancelBtnText="cancelBtnText" confirmBtnBsStyle="success" cancelBtnBsStyle="default" disabled={disableButton} title="title" onConfirm={() => this.submit()} onCancel={() => this.hideAlert()} > submit </SweetAlert> )} <button className="btn btn-success btn-sm" onClick={this.handleSubmitInvoice} > Click </button> </div> ); }，以使按钮的禁用效果明显。

Answer 2

问题解决了，试试看

import React, { Component } from "react";
import SweetAlert from "react-bootstrap-sweetalert";
import ReactDOM from "react-dom";

const SweetAlertFunction = ({ show, disableButton, submit, hideAlert }) => {
  return (
    <SweetAlert
      warning
      show={show}
      showCancel
      confirmBtnText="confirmBtnText"
      cancelBtnText="cancelBtnText"
      confirmBtnBsStyle="success"
      cancelBtnBsStyle="default"
      disabled={disableButton}
      title="title"
      onConfirm={submit}
      onCancel={hideAlert}
    >
      submit
    </SweetAlert>
  );
};

export default class HelloWorld extends Component {
  constructor(props) {
    super(props);
    this.state = {
      disableButton: false,
      show: false
    };
  }

  hideAlert() {
    this.setState({
      show: false
    });
  }

  submit() {
    this.setState({ disableButton: true });
    console.log("submit");
    setTimeout(() => {
      this.setState({ disableButton: false });
    }, 3000);
  }

  render() {
    const { show, disableButton } = this.state;
    console.log("disableButton", disableButton);
    return (
      <div style={{ padding: "20px" }}>
        <SweetAlertFunction
          show={show}
          disableButton={disableButton}
          submit={() => this.submit()}
          hideAlert={() => this.hideAlert()}
        />
        <button
          className="btn btn-success btn-sm"
          onClick={() => this.setState({ show: true })}
        >
          Click
        </button>
      </div>
    );
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById("app"));

react-bootstrap-sweetalert如何在首次单击后禁用提交按钮？

2 个答案: