1
votes

Empêcher de cliquer à nouveau lors de la soumission du formulaire dans React

J'ai un formulaire dans mon application React et je voulais désactiver ou ne pas pouvoir cliquer sur le bouton Pay une fois que je l'ai soumis. Le problème est qu'il ne se soumet pas via l'API mais via un <form> .

Forme

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

Bouton

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

Fonction de paye

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

javascript reactjs ecmascript-6 asp.net react-hooks

0 commentaires

3 Réponses :

0
votes

Si vous souhaitez implémenter cette fonctionnalité, vous devez utiliser l'événement de formulaire onSubmit . Utilisez n'importe quel client HTTP comme fetch ou axios pour appeler l'API. Vous pouvez utiliser une valeur d'état pour suivre l'état de la soumission.

Forme

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

Bouton

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

Etat

const [submitting, setSubmitting] = useState(false)

Fonction de paye

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

Soumettre la fonction

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

1 commentaires

Veuillez fournir un exemple et plus d'informations

0
votes

Vous pouvez utiliser une valeur booléenne pour la désactiver et l'activer dans useState.

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

alors cela ne fonctionnera que _boolValue == true

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

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

1 commentaires

Veuillez fournir un exemple et plus d'informations

0
votes

Vous pouvez utiliser useState pour garder une trace du moment où le bouton est cliqué:

const [paid, setPaid] = useState(false)

Ensuite, définissez l'état enabled du bouton en fonction de ce qui précède. Vous pouvez basculer le booléen dans votre fonction onPay .

0 commentaires