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

Question

我试图防止用户两次登录并创建2个会话(当他们按下登录按钮两次非常快)。我想禁用按钮后，它是点击和启用后，大约。2秒的错误，如"密码不正确";这样用户就可以重新输入他们的详细信息并再次发送表单。我目前有onsubmit函数(下面的代码)，当我实现onclick禁用按钮时，它不会发送按钮，因为按钮在提交表单之前被禁用。

解决这个问题的最好方法是什么?by 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("/");
}
});
}
};

Answer 1

函数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("/");
}
});
}
};