React/Bootstrap 4、禁用按钮以防止重复提交表单的正确方法是什么?
In React/Bootstrap 4, what is the proper way to disable a button to prevent duplicate form submission?
我正在使用 React 16.13 和 Bootstrap 4. 我有以下表单容器...
const FormContainer = (props) => {
...
const handleFormSubmit = (e) => {
e.preventDefault();
CoopService.save(coop, setErrors, function(data) {
const result = data;
history.push({
pathname: "/" + result.id + "/people",
state: { coop: result, message: "Success" },
});
window.scrollTo(0, 0);
});
};
return (
<div>
<form className="container-fluid" onSubmit={handleFormSubmit}>
<FormGroup controlId="formBasicText">
...
{/* Web site of the cooperative */}
<Button
action={handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
</FormGroup>
</form>
</div>
);
是否有禁用提交按钮以防止重复提交表单的标准方法?要注意的是,如果从服务器返回的表单中存在错误,我希望再次启用该按钮。下面是我上面引用的“CoopService.save”...
...
save(coop, setErrors, callback) {
// Make a copy of the object in order to remove unneeded properties
coop.addresses[0].raw = coop.addresses[0].formatted;
const NC = JSON.parse(JSON.stringify(coop));
delete NC.addresses[0].country;
const body = JSON.stringify(NC);
const url = coop.id
? REACT_APP_PROXY + "/coops/" + coop.id + "/"
: REACT_APP_PROXY + "/coops/";
const method = coop.id ? "PUT" : "POST";
fetch(url, {
method: method,
body: body,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw response;
}
})
.then((data) => {
callback(data);
})
.catch((err) => {
console.log("errors ...");
err.text().then((errorMessage) => {
console.log(JSON.parse(errorMessage));
setErrors(JSON.parse(errorMessage));
});
});
}
不确定是否相关,但这是我的 Button 组件。愿意更改它或以上内容以帮助实施标准的、开箱即用的方法来解决这个问题。
import React from "react";
const Button = (props) => {
return (
<button
style={props.style}
className={
props.type === "primary" ? "btn btn-primary" : "btn btn-secondary"
}
onClick={props.action}
>
{props.title}
</button>
);
};
export default Button;
Greg 已经提到 this link 向您展示如何使用组件状态来存储按钮是否被禁用。
然而,最新版本的 React 使用带钩子的功能组件,而不是 this.state
或 this.setState(...)
。以下是您可能会采取的方式:
import { useState } from 'react';
const FormContainer = (props) => {
...
const [buttonDisabled, setButtonDisabled] = useState(false);
...
const handleFormSubmit = (e) => {
setButtonDisabled(true); // <-- disable the button here
e.preventDefault();
CoopService.save(coop, (errors) => {setButtonDisabled(false); setErrors(errors);}, function(data) {
const result = data;
history.push({
pathname: "/" + result.id + "/people",
state: { coop: result, message: "Success" },
});
window.scrollTo(0, 0);
});
};
return (
...
<Button
action={handleFormSubmit}
disabled={buttonDisabled} // <-- pass in the boolean
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>
...
);
const Button = (props) => {
return (
<button
disabled={props.disabled} // <-- make sure to add it to your Button component
style={props.style}
className={
props.type === "primary" ? "btn btn-primary" : "btn btn-secondary"
}
onClick={props.action}
>
{props.title}
</button>
);
};
我写了一些乱七八糟的内联代码来替换你的 setErrors
函数,但你可能想将 setButtonDisabled(false);
添加到你最初定义的 setErrors
函数中,而不是像我一样从匿名函数调用它;所以记住这一点。
可以找到有关 useState
挂钩的更多信息 here。让我知道这是否回答了您的问题。
正如其他人所说,禁用按钮是一个完美的解决方案。但我不喜欢按钮在提交时改变其视觉效果。
您应该改为设置按钮的 css 属性 pointer-events: none
,这将关闭所有事件的发出。一旦提交完成或失败,您可以删除 属性。
我正在使用 React 16.13 和 Bootstrap 4. 我有以下表单容器...
const FormContainer = (props) => {
...
const handleFormSubmit = (e) => {
e.preventDefault();
CoopService.save(coop, setErrors, function(data) {
const result = data;
history.push({
pathname: "/" + result.id + "/people",
state: { coop: result, message: "Success" },
});
window.scrollTo(0, 0);
});
};
return (
<div>
<form className="container-fluid" onSubmit={handleFormSubmit}>
<FormGroup controlId="formBasicText">
...
{/* Web site of the cooperative */}
<Button
action={handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
</FormGroup>
</form>
</div>
);
是否有禁用提交按钮以防止重复提交表单的标准方法?要注意的是,如果从服务器返回的表单中存在错误,我希望再次启用该按钮。下面是我上面引用的“CoopService.save”...
...
save(coop, setErrors, callback) {
// Make a copy of the object in order to remove unneeded properties
coop.addresses[0].raw = coop.addresses[0].formatted;
const NC = JSON.parse(JSON.stringify(coop));
delete NC.addresses[0].country;
const body = JSON.stringify(NC);
const url = coop.id
? REACT_APP_PROXY + "/coops/" + coop.id + "/"
: REACT_APP_PROXY + "/coops/";
const method = coop.id ? "PUT" : "POST";
fetch(url, {
method: method,
body: body,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw response;
}
})
.then((data) => {
callback(data);
})
.catch((err) => {
console.log("errors ...");
err.text().then((errorMessage) => {
console.log(JSON.parse(errorMessage));
setErrors(JSON.parse(errorMessage));
});
});
}
不确定是否相关,但这是我的 Button 组件。愿意更改它或以上内容以帮助实施标准的、开箱即用的方法来解决这个问题。
import React from "react";
const Button = (props) => {
return (
<button
style={props.style}
className={
props.type === "primary" ? "btn btn-primary" : "btn btn-secondary"
}
onClick={props.action}
>
{props.title}
</button>
);
};
export default Button;
Greg 已经提到 this link 向您展示如何使用组件状态来存储按钮是否被禁用。
然而,最新版本的 React 使用带钩子的功能组件,而不是 this.state
或 this.setState(...)
。以下是您可能会采取的方式:
import { useState } from 'react';
const FormContainer = (props) => {
...
const [buttonDisabled, setButtonDisabled] = useState(false);
...
const handleFormSubmit = (e) => {
setButtonDisabled(true); // <-- disable the button here
e.preventDefault();
CoopService.save(coop, (errors) => {setButtonDisabled(false); setErrors(errors);}, function(data) {
const result = data;
history.push({
pathname: "/" + result.id + "/people",
state: { coop: result, message: "Success" },
});
window.scrollTo(0, 0);
});
};
return (
...
<Button
action={handleFormSubmit}
disabled={buttonDisabled} // <-- pass in the boolean
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>
...
);
const Button = (props) => {
return (
<button
disabled={props.disabled} // <-- make sure to add it to your Button component
style={props.style}
className={
props.type === "primary" ? "btn btn-primary" : "btn btn-secondary"
}
onClick={props.action}
>
{props.title}
</button>
);
};
我写了一些乱七八糟的内联代码来替换你的 setErrors
函数,但你可能想将 setButtonDisabled(false);
添加到你最初定义的 setErrors
函数中,而不是像我一样从匿名函数调用它;所以记住这一点。
可以找到有关 useState
挂钩的更多信息 here。让我知道这是否回答了您的问题。
正如其他人所说,禁用按钮是一个完美的解决方案。但我不喜欢按钮在提交时改变其视觉效果。
您应该改为设置按钮的 css 属性 pointer-events: none
,这将关闭所有事件的发出。一旦提交完成或失败,您可以删除 属性。