我正在尝试向我的react.js 项目添加一个react-hook-form。形式定义为:
<form onSubmit={handleSubmit(onSubmit)} ref={submitRef}>
//some input elements
<div className='d-flex justify-content-center' >
<button
type="submit"
className=" btn btn-warning" >
submit
</button>
</div>
</form>
onSubmit方法定义为:
const onSubmit = data => {
console.log(data)
};
我正在尝试定义一个计时器(比如10分钟),并且我想在计时器到期后触发表单的onSubmit事件。为此,我使用了react-timer-hook,如下所示:
const time = new Date();
time.setSeconds(time.getSeconds() + 2);
let submitRef = useRef()
const {
seconds,
minutes,
hours,
days,
isRunning,
start,
pause,
resume,
restart,
} = useTimer({ time, onExpire: () => want to trigger the form submit event });
我应该如何定义 onExpire 属性?
formRef.current.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))
您可以手动调用
handleSubmit
来自文档
// It can be invoked remotely as well
handleSubmit(onSubmit)();
// You can pass an async function for asynchronous validation.
handleSubmit(async (data) => await fetchAPI(data))
类似这样的东西(未经测试)
import { useEffect } from 'react';
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
useEffect(() => {
handleSubmit(onSubmit)();
}, [])
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}
您必须在提交之前先触发验证。使用从 useForm 挂钩返回的
trigger
函数。然后调用 handleSubmit
函数。
const submitForm = async () => {
// Trigger validations before submitting
const isValid = await trigger();
if (isValid) {
handleSubmit(onSubmit)();
}
};