Reactjs 如何在第一次单击后禁用提交按钮？

我对react中的

react引导sweetalert

库有问题。实际上它工作正常，直到互联网连接变慢。当有人试图点击submit按钮时，由于互联网速度较慢（我通过“Network section[slow 3G]”进行模拟），警报不会在点击按钮后准确关闭，而是在几秒钟后关闭。所以，有可能有人可以点击多次提交按钮。这是一个问题，因为几个相同的请求可以流向后端和数据库。在不使用库的其他部分中，我可以在处理

onClick

后“禁用”react

states

所以问题是-在处理

onConfirm

函数后禁用

react bootstrap sweetalert

库中的按钮。 代码：

handleSubmitInvoice=（）=>{
这是我的国家({
sweetalert：(
this.submit（）}
onCancel={（）=>this.hideAlert（）}
>
{this.state.alert.confirmSubmit}
)
});
};

在render（）中：

提交

提交功能：

submit=（）=>{
const req={invoice:this.state.invoiceNumber}；
Axios.post（“/api”，要求）
.然后（（）=>{
这个。道具。历史。推({
路径名：“/mypathname”，
声明：{
FromminVoice：真的
}
});
})
.catch（错误=>{
警报。错误(
err.response.data.code==“内部错误”
？this.state.alert.raiseError
：err.response.data.text，
{
位置：“右上角”，
效果：“弹跳唇”，
超时：2000
}
);
这个。hideAlert（）；
});
};

代码沙盒：

---

提前感谢。

在您的情况下，由于您将

Sweetalert

组件分配给

Sweetalert

状态，您需要有一个控制禁用状态的本地状态，但为了简单起见，您可以使

Sweetalert

状态控制

Sweetalert

组件的可见性/存在性，如下图所示：

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

handleSubmitInvoice（）{
//只需将sweetalert设置为true即可显示sweetalert组件
this.setState（{sweetalert:true}）；
}
render（）{
const{sweetalert，disableButton}=this.state；
返回(
//这会使disableButton反应，并将其自动传递给Sweetalert组件
{sweetalert&&(
this.submit（）}
onCancel={（）=>this.hideAlert（）}
>
提交
)}
点击
);
}

你可以在这个沙箱里看到它

---

另外，我在submit中添加了

setTimeout

，以使按钮的禁用变得明显。

在您的情况下，由于您将

Sweetalert

组件分配给

Sweetalert

状态，因此您需要有一个控制禁用状态的本地状态，但为了简单起见，您可以使

sweetalert

状态控制

sweetalert

组件的可见性/存在性，如下所示：

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

handleSubmitInvoice（）{
//只需将sweetalert设置为true即可显示sweetalert组件
this.setState（{sweetalert:true}）；
}
render（）{
const{sweetalert，disableButton}=this.state；
返回(
//这会使disableButton反应，并将其自动传递给Sweetalert组件
{sweetalert&&(
this.submit（）}
onCancel={（）=>this.hideAlert（）}
>
提交
)}
点击
);
}

你可以在这个沙箱里看到它

---

另外，我在提交中添加了

setTimeout

，以使按钮的禁用变得明显。

问题已解决，请尝试此操作

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

import React，{Component}来自“React”；
从“react bootstrap SweetAlert”导入SweetAlert；
从“react dom”导入react dom；
const SweetAlertFunction=（{show，disableButton，submit，hideAlert}）=>{
返回(
提交
);
};
导出默认类HelloWorld扩展组件{
建造师（道具）{
超级（道具）；
此.state={
禁用按钮：false，
节目：假
};
}
希德勒特（）{
这是我的国家({
节目：假
});
}
提交（）{
this.setState（{disableButton:true}）；
控制台日志（“提交”）；
设置超时（（）=>{
this.setState（{disableButton:false}）；
}, 3000);
}
render（）{
const{show，disableButton}=this.state；
日志（“disableButton”，disableButton）；
返回(
this.submit（）}
hideAlert={（）=>this.hideAlert（）}
/>
this.setState（{show:true}）}
>
点击
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

问题已解决尝试此操作

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

import React，{Component}来自“React”；
从“react bootstrap SweetAlert”导入SweetAlert；
从“react dom”导入react dom；
const SweetAlertFunction=（{show，disableButton，submit，hideAlert}）=>{
返回(
提交
);
};
导出默认类HelloWorld扩展组件{
建造师（道具）{
超级（道具）；
此.state={
禁用按钮：false，
节目：假
};
}
希德勒特（）{
这是我的国家({
节目：假
});
}
提交（）{
this.setState（{disableButton:true}）；
控制台日志（“提交”）；
设置超时（（）=>{
this.setState（{disableButton:false}）；
}, 3000);
}
render（）{
const{show，disableButton}=this.state；
日志（“disableButton”，disableButton）；
返回(
this.submit（）}
hideAlert={（）=>this.hideAlert（）}
/>
this.setState（{show:true}）}
>
点击
);
}
}
ReactDOM.render（，document.getElementById（“app”）；