React JS 多个提交按钮react-hook-form

Question

我使用react-hook-form进行表单验证和提交，使用单个提交类型按钮一切正常，现在我需要三个按钮，“保存草稿”，“预览页面中的数据值”和“提交审批”，我可以选择退出模式选择单选按钮，但想要具有三个按钮提交功能，这需要表单数据。为输入字段添加 onchnage 可以，但表单验证需要重新编写。

  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函数会获取表单数据，其他两个按钮函数如何获取表单数据？

爱..与

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

Answer 1

我遇到了同样的问题，我通过以下方式解决了它：

我有两个按钮，第一个底部按钮正常验证并提交表单。第二个按钮仅验证并调用自定义函数。

我假设你也有这样的情况。一个用于保存的按钮，一个用于存储草稿的按钮。

<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...
}

这个对我有用！

Answer 2

您可以在多个地方使用handleSubmit。

const handleSubmitDraft=()=>{
  handleSubmit(aync(data)=>{...})()

}
const handleSubmitPreview=()=>{
  handleSubmit((data)=>{...})()
}

<button onClick={handleSubmitDraft}>
   Save Draft
</button > 
<button onClick={handleSubmitPreview}>
    Preview
</button> 

Answer 3

如果你必须处理react-hook-form中的多个提交按钮

1.从表单标签中删除您的提交方法并将其添加到您的按钮单击中

2. 将提交按钮移到表单标签之外

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>