在 React 中提交表单时防止再次单击答案

【问题标题】：Prevent Clicking Again When Submitting Form in React在 React 中提交表单时防止再次单击
【发布时间】：2020-11-16 10:06:05
【问题描述】：

我的 React 应用程序中有一个表单，我想在提交后禁用或无法单击 Pay 按钮。问题是，它不是通过 API 提交，而是通过<form>。

表格

<form ref={formEl} action="https://sample.aspx" method="POST">
  <input name="order" id="order" value={base64String} readOnly type="hidden" />
</form>

按钮

<Button onClick={() => onPay(order.id)}>Pay</Button>;

支付功能

const onPay = (id) => {
  formEl.current && formEl.current.submit();
};

【问题讨论】：

标签： javascript asp.net reactjs ecmascript-6 react-hooks

【解决方案1】：

如果你想实现这个功能，你应该使用表单事件onSubmit。使用任何 HTTP 客户端，如 fetch 或 axios 来调用 API。您可以使用状态值来跟踪提交状态。

表格

    <form ref={formEl} action="https://sample.aspx" method="POST" onSubmit={onSubmit}>
      <input name="order" id="order" value={base64String} readOnly type="hidden" />
    </form>

按钮

    <Button onClick={() => onPay(order.id)}>Pay</Button>;

州

const [submitting, setSubmitting] = useState(false)

支付功能

const onPay = (id) => {
  if (submitting) return;
  formEl.current && formEl.current.submit();
};

提交函数

const onSubmit = async (event) => {
  event.preventDefault();
  setSubmitting(true);
  await fetch('https://sample.aspx');
  setSubmitting(false);
}

【讨论】：

请提供示例和更多信息

【解决方案2】：

您可以使用useState 来跟踪单击按钮的时间：

const [paid, setPaid] = useState(false)

然后根据上面设置按钮的enabled状态。您可以在 onPay 函数中切换布尔值。

【讨论】：

【解决方案3】：

您可以使用布尔值在 useState 中禁用和启用它。

 const [_boolValue, setBoolValue] = useState(true);

 <Button onClick={() => {
 setBoolValue(!_boolValue)
 onPay(order.id)
 }}>Pay</Button>;

那么它只会工作_boolValue == true

 const onPay = (id) => {
   _boolValue && formEl.current && formEl.current.submit();
 };

【讨论】：

请提供示例和更多信息