我如何限制双击一个按钮在我的React js应用程序?

Question

我有一个按钮(Material-UI)在我的ReactJs应用程序。现在的场景是，当用户单击(次数太多了!)并调用API来插入表单数据时，会触发多次单击，这往往会插入两次、三次或n次(取决于用户单击)。所以，我基本上想要一个适当的方式来接受一个单一的点击(尽管用户点击一个按钮n次)。有谁能告诉我做这件事的正确方法吗?

注意:我已经尝试禁用和启用按钮点击，以及setTimeout调用API只在单次点击，但它不起作用。仍然在生产中，我有问题。

所以我想要一个合适的方式来实现单次点击按钮(让用户点击多次按钮)

Answer 1

在按钮单击时设置状态变量，并根据该变量禁用按钮。这样用户就不能再点击了。而且，你可以在API响应上启用按钮。

的例子:

[disableButton, setDisableButton] = useState(false);
const submitFunction = () => {
setDisableButton(true);
apiCall().then(resp => {
setDisableButton(false) // enable button on api success response
// code on success response
})
.catch((error) => {
setDisableButton(false) 
});
}
<button onClick={() => submitFunction()} disabled={disableButton}>Submit</button>