反应钩子形式 - 每次提交后为空输入字段

Question

我试图了解反应钩子形式是如何工作的。 为此，我创建了以下示例：

import React from 'react';
import { useForm } from 'react-hook-form';
const InputForm = () => {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<>
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Group controlId='formBasicName'>
<Form.Label>Name</Form.Label>
<Form.Control
type='text'
name='name'
ref={register}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Label>Email address</Form.Label>
<Form.Control
type='email'
name='email'
ref={register}
/>

<Button className='submitBtn' type='submit'>
Submit
</Button>
</Form>
</>
);
};
export default InputForm;

它可以工作，如果我提交表单，我可以在控制台中看到数据对象。 唯一的问题是，每次提交后，输入框仍然显示其值。 我希望每次提交后输入框的值都为空。 使用useState很容易，但是现在我正在使用react-hook-from，我不知道该怎么做。

Answer 1

const InputForm = () => {
const { register, handleSubmit, reset } = useForm();
const onSubmit = (data) => {
//...
reset();
};

将其添加到提交功能

Answer 2

使用此提交函数：

const onSubmit = (data, e) => {
e.target.reset();
};

Answer 3

React Hook Forms v7。这将清除表单数据。

const {register, handleSubmit, formState: { errors }, reset} = useForm();
const onSubmit = (data, e) => {
console.log(data)
reset('', {
keepValues: false,
})
}

Answer 4

请不要接受前面的答案 - RHF 文档(请参阅规则Submit With Reset选项卡(不赞成onSubmit回调中的reset：

建议不要在 onReset 或 onSubmit 回调中调用 set。

正确的方法是拥有一个在所有异步工作完成后更新的useEffect：

const { reset } = useForm();
const [isSafeToReset, setIsSafeToReset] = useState(false);

useEffect(() => {
if (!isSafeToReset) return;
reset(result); // asynchronously reset your form values
}, [reset])
const onSubmit = async (data, e) => {
try {
await fetch('./api/formValues.json'); 
setIsSafeToReset(true);
} catch (e) {
// do something w Err
}
};

Answer 5

使用以下代码重置输入字段

const onSubmit = (data, e) => {
e.target[0].value = ''; // for name
e.target[1].value = '';  // for email
};