React JS多个提交按钮

Question

我使用react-hook-form进行表单验证和提交，使用单个提交类型按钮一切正常，现在我需要三个按钮，"Save Draft"，"在页面中预览数据值";、"报批";，我可以选择退出模式选择单选按钮，但希望有三个按钮提交功能，这需要表单数据。为输入字段添加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

可以在多个地方使用handlessubmit

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>

Answer 4

我使用yup与解析器进行验证，所以我的答案可能不同。我还使用触发器来验证而不提交。我还重置了表单，这样保存后它就不会被标记为"dirty"。

export default function MyForm(props) {
const {
control,
reset,
trigger,
handleSubmit,
getValues,
formState: { isDirty },
} = useForm({
mode: "onBlur",
reValidateMode: "onBlur",
shouldUnregister: true,
defaultValues: {
name: "",
id: "",
//rest of values
},
resolver: yupResolver(schema),
});  

const handleOnSubmit = async (event) => {
if(!isDirty){
//navigate out of page
} else {
//save and exit
}
}
const handleOnSave = async () => {
trigger(); //triggers validation for whole form
const formValue = getValues();
const isValid = schema.isValidSync(formValue);
if(isValid){
//await save actions
if(savedSuccessfully){
reset(formValue);
//anything else
}
}
};
}

Answer 5

我偶然发现了同样的问题，我通过向每个带有setValue()函数的提交按钮添加onClick事件来解决这个问题。例子:

import { useForm } from 'react-hook-form';
const { register, handleSubmit, setValue } = useForm();
const onSubmit = (data) => {
console.log(data.method)
}
<form onSubmit={handleSubmit(onSubmit)}>
<button type='submit' name='A' {...register('method')} onClick={() => setValue('method', 'A')}>A button</button>
<button type='submit' name='B' {...register('method')} onClick={() => setValue('method', 'B')}>B button</button>
</form>

Answer 6

您可以尝试为按钮指定名称和类型，并使用window.event.submit .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;
}
}

但是这个解决方案在safari中不起作用

Answer 7

我是这样做的:

onSubmit-表单提交处理程序

<Button type="submit">Post</Button>
<Button
appearance="stroke"
onClick={handleSubmit((data) =>
onSubmit({
...data,
status: CreateResumeRequestStatusEnum.Draft,
})
)}
>
Save for later
</Button>