在 reactjs 钩子中提交后如何重置表单

Question

这是我第一次使用钩子我不知道如何在提交后清除输入字段，form.reset() 不起作用

import { useForm } from "react-hook-form";
import....

export default function AddUser() {
  const URL = "http://localhost:3000/AddUser";
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    if (data) {
      axios.post(URL, data);
    }
form.reset()
  };

这里是return部分

  return (
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <div className="container">
              <input type="text" name="name" placeholder="Name" ref={register({required: true})}/> 

              <input type="radio" name="gender" value="male" ref={register({ required: true })}/>:Male

              <input type="radio" name="gender" value="female" ref={register({ required: true })}/:Female
            <button type="submit" className="btn "> add</button>
        </div>
      </form>
  );
}

提前致谢

//////////

Answer 1

您需要设置一个默认状态，以便在处理点击时设置，这样您的组件将在每次提交时重置。然而，如果你想防止默认，你必须在 onSubmit 函数

中设置 event.preventDefault();

import { useForm, useState } from "react-hook-form";
import....

export default function AddUser() {
  const [formState, setFormState] = useState({})

  const URL = "http://localhost:3000/AddUser";
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    if (data) {
      setFormState(data)
      axios.post(URL, formState);
    }
form.reset()[![enter image description here][1]][1]
  };

Answer 2

您需要从 useForm() 挂钩中导入 reset 才能在您的标签之外使用它。

所以 const { register, handleSubmit, errors, reset } = useForm();

然后在你的提交功能上

const onSubmit = (data) => {
    if (data) {
      axios.post(URL, data);
    }
    reset({})
  };

按照这些思路应该可行。

在 reactjs 钩子中提交后如何重置表单

How can I reset form after submit in reactjs hooks

javascript

reactjs

react-hooks

react-hook-form