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

Posted 2023-02-19

【中文标题】React JS 多个提交按钮 react-hook-form

【英文标题】：React JS Multiple submit Buttons react-hook-form

【发布时间】：2021-05-16 11:50:58

【问题描述】：

我使用 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> 

【问题讨论】：

这个问题解释力太弱了。请给出正确的代码和解释

添加示例代码

【参考方案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...

它对我有用！

【参考方案2】：

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

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


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

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

【参考方案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>

【讨论】：

你用两个不同的按钮调用同一个方法。

【参考方案4】：

您可以尝试为按钮指定名称和类型，然后使用 window.event.submitter.name 捕获它。

    <button type="submit" name="submit">Submit</button> 
    
    <button type="submit" name="draft">Draft</button> 

    <form onSubmit=handleSubmit > ...

    const handleSubmit = () =>  
    const buttonType=window.event.submitter.name // will return draft or submit and you can handle it using switch case.

    if(buttonType==="submit")
    //HANDLE SUBMIT FUNCTION
    return;
    

    if(buttonType==="draft")
     //HANDLE DRAFT FUNC
    return;