在一个 React 表单（或类似的东西）中有两个按钮

Question

解决方案：如何使用来自单个表单的相同信息实现两个功能（使用两个按钮）：

  async function myHandleSubmit(data, event){
      if(event.nativeEvent.submitter?.id === "submit1"){
        console.log("Ref1");
      }else if(event.nativeEvent.submitter?.id === "submit2"){
        console.log("Ref2");
      }
  }

  <Form key={1} onSubmit={handleSubmit(myHandleSubmit)}>
       // More code...
       <FormButtonTop left id="submit1" type="submit" value="Button A" />
       <FormButtonTop right id="submit2" type="submit" value="Button B" />
       // More code...
  </Form>

Answer 1

所以您只有一个表单提交处理程序，并且您想根据单击的提交按钮执行不同的操作？对。

您可以按照以下步骤进行操作

1.create 点击按钮的状态

2.onclick of button设置点击哪个按钮

3.at 提交时间检查在提交处理程序中单击了哪个按钮

例如考虑以下代码

//infunctional component you can use useRef hook
 const [clickedButton,setClicked] = useState("");

像这样为两个按钮分配点击处理程序并在点击时设置点击按钮值

 <FormButtonTop onClick={()=>{setClicked("firstButton")}} left id="submit1" type="submit" value="A generator" />
 <FormButtonTop  onClick={()=>{setClicked("secondButton")}} right id="submit2" type="submit" value="B generator" />

最后在您的提交处理程序中使用 clickedButton 检查单击了哪个按钮并调用适当的函数，如下所示

 funciton handleSubmit(event){
 event.preventDefault();
  if(clickedButton==="firstButton"){
     //form is submited with submit1 click
     //do your code 
   }elseif(clickedButton==="secondButton"){
      //form is submited with submit2 click
         ///do your code here for submit2 click
    }else{
        //form is submited by pressing enter key
         // do your code to handle enter key press
      }
   
}

创建了示例代码 here。

由于表单也可以使用回车键提交，所以当在任何文本框上按下回车键时，您需要设置 clickedButton=""

在一个 React 表单（或类似的东西）中有两个按钮

Having two buttons in one React form (or something similar)

forms

reactjs

react-hooks