React JS Multiple Soumettre les boutons de réact-crochet-forme

Question

iM en utilisant une forme de crochet réactile pour la validation et la soumission de formule, tout fonctionne bien avec le bouton de type de soumission unique, je dois maintenant avoir trois boutons, "Sauvegarder le projet" "," Aperçu des valeurs de données à la page "et" Soumettre pour approbation ", Je peux vous désinscrire à des boutons radio de sélection de mode, mais je voulais avoir une fonction de soumission de trois boutons, qui nécessite des données de formulaire. L'ajout d'Onchnage pour les champs de saisie fonctionnera, mais la validation de la forme doit écrire à nouveau.

  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => alert(JSON.stringify(data));
  function NeedTohaveFormDataHere1(Data) {

   } function NeedTohaveFormDataHere2(Data) {

   }
    return (  <form onSubmit={handleSubmit(onSubmit)}>
     <Headers />

  <input name="firstName" ref={register} placeholder="First name" />

  <input name="lastName" ref={register} placeholder="Last name" />

  <select name="category" ref={register}>
    <option value="">Select...</option>
    <option value="A">Category A</option>
    <option value="B">Category B</option>
  </select>
  <button onClick={NeedTohaveFormDataHere1}>
   Save Draft
  </button > 
  <button onClick={NeedTohaveFormDataHere2}>
    Preview
  </button>  
  <input type="submit" />
</form>
 );
 }
 

la fonction OnSubmit obtiendra des données de formulaire, comment obtenir des données de formulaire dans d'autres fonctions de deux boutons?

balloved .. avec

  <button onClick={handleSubmit(NeedTohaveFormDataHere1)}>
   Save Draft
  </button > 
  <button onClick={handleSubmit(NeedTohaveFormDataHere2)}>
    Preview
  </button> 

Answer 1

Si vous devez gérer les multiples boutons Soumettre dans la forme de crochet de réaction

1. Supprimez votre méthode de soumission dans la balise de formulaire et ajoutez-la à votre bouton Cliquez sur

2. Déplacez vos boutons Soumettre en dehors de la balise de formulaire

const { handleSubmit } = useForm();

<form>
 <input />
 <input />
</form>

<button onClick={handleSubmit((d) => console.log(d))} > Save </button>
<button onClick={handleSubmit((d) => console.log(d))} > Draft </button>