React JS Multiple submit Buttons react-hook-form

Question

im using react-hook-form for form validation and submission ,everything work's fine with single submit type button, now i need to have three buttons , "Save Draft" ,"Preview Data Values in Page" ,and "Submit for approval " ,i can opt-out for a Mode Selection radio Buttons ,But wanted to have three button submit function, which needs form data . adding onchnage for input fields will work ,but form validation needs to write again .

  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>
 );
 }
 

onSubmit function will get form data ,how to get form data in other two button functions ?

sloved .. with

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

Answer 1

I had the same problem and I resolved it the following way:

I have two buttons, the first bottom validates and submits the form normally. The second button only validates and calls a custom function.

I'm assuming you have the situation. One button to save and one to store a draft.

<form id="example-form" onSubmit={handleSubmit(handleOnSave)}>
  <IconButtonTooltip
    form="example-form"
    title="Only save"
  >
    <SaveIcon className={classes.icon} />
  </IconButtonTooltip>

  <IconButtonTooltip
    form="example-form"
    title="Save and sign"
    onClick={handleSubmit(handleOnSingAndSave)}
  >
    <SignatureIcon className={classes.icon} />
  </IconButtonTooltip>
</form>

const handleOnSingAndSave  = () => {
  // Handle things...
}

It works for me!