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

Question

I have a form in my React app and i wanted to disable or not be able to click the Pay button once i have submitted it. The problem is, that it is not submitting through API but through a <form> .

Form

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

Button

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

Pay Function

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

Answer 1

If you want to implement this functionality, you should use form event onSubmit . Use any HTTP client like fetch or axios to call API. You can use a state value to track submission status.

Form

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

Button

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

State

const [submitting, setSubmitting] = useState(false)

Pay Function

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

Submit Function

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

Answer 2

1. You can use boolean value to disable and enable it within useState.

    const [_boolValue, setBoolValue] = useState(true); <Button onClick={() => { setBoolValue(!_boolValue) onPay(order.id) }}>Pay</Button>;

2. then it will work only _boolValue == true

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

Answer 3

You can use useState to keep track of when the button is clicked:

const [paid, setPaid] = useState(false)

Then set the button's enabled state based on the above. You can toggle the boolean within your onPay function.