Javascript 如何实现按钮禁用功能或其他技术，使用户不必登录两次？反应，表达

我试图阻止用户登录两次并创建两个会话（当他们非常快地按两次登录按钮时）。我正在考虑在单击按钮后禁用该按钮，并在大约2秒后启用该按钮，以防出现错误，例如“密码不正确”，这样用户可以重新输入其详细信息并再次发送表单。我目前确实有onsbuit功能（下面的代码），当我实现onclick disable按钮时，它不会发送，因为在提交表单之前按钮被禁用

解决这个问题的最佳方法是什么？onSubmit函数的代码如下：

  handleFormSubmission = (event) => {
    event.preventDefault();

    const credentials = {
      username: this.state.username,
      password: this.state.password,
    };

    if (!this.state.username.trim()) {
      this.setState({
        errorUsername: "*Enter your username.",
      });
    }
    if (!this.state.password.trim()) {
      this.setState({
        errorPassword: "*Enter your password.",
      });
    }
    if (this.state.username.trim() && this.state.password.trim()) {
      this.setState({
        buttonDisable: true,
      });

      login(credentials).then((res) => {
        this.setState({
          buttonDisable: false,
        });
        if (!res.status) {
          this.setState({
            error: res.errorMessage,
          });
        } else {
          localStorage.setItem("accessToken", res.data.accessToken);
          this.props.authenticate(res.data.user);
          this.setState({
            buttonDisabled: true,
          });
          this.props.history.push("/");
        }
      });
    }
  };

---

无需实现onClick功能，解决方案是停止用户两次提交表单，在向服务器发送数据时禁用按钮，在收到响应时启用按钮：

handleFormSubmission = (event) => {
    event.preventDefault();

    const credentials = {
      username: this.state.username,
      password: this.state.password,
    };

    if (!this.state.username.trim()) {
      this.setState({ errorUsername: "*Enter your username."});
    }
    if (!this.state.password.trim()) {
      this.setState({ errorPassword: "*Enter your password."});
    }
    if (this.state.username.trim() && this.state.password.trim()) {
      setState({
         disableButton: true
      }) //Disable your button here
      login(credentials).then((res) => {
         setState({
         disableButton: false
       }) //enable your button
        if (!res.status) {
          this.setState({error: res.errorMessage});
        } else {
          localStorage.setItem("accessToken", res.data.accessToken);
          this.props.authenticate(res.data.user);
          this.props.history.push("/");
        }
      });
    }
  };

---

谢谢，但我尝试过实现它，但如果我快速按下它，它仍然会创建两个会话。它应该可以工作，你可以更新上面的代码，看看有什么问题。它可以工作，我有一个打字错误！有时你叫它

按钮禁用

，有时你叫它

按钮禁用

（带d）。是的，我已经意识到了这一点，现在它正在工作！谢谢你提出了脱发的概念。