react-hook-form - 每次提交后清空输入字段

Question

我试图了解react-hook-form是如何工作的。 为此，我创建了以下示例：

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

请不要接受之前的答案 - RHF 文档（请参阅规则和

Submit With Reset

选项卡） 不批准

reset

回调中的

onSubmit

：

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

正确的方法是让

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 4

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

    const {register, handleSubmit, formState: { errors }, reset} = useForm();

    const onSubmit = (data, e) => {
        console.log(data)
        reset('', {
            keepValues: false,
        })
    }

Answer 5

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

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

Answer 6

//use resetField function 

const { register, handleSubmit, resetField } = useForm();
const onSubmit = async (data) => {
    console.log(data);
      resetField('fieldname');
   
    }