React-hook-form 'reset' 工作正常，提交后输入字段仍未清空答案

【问题标题】：React-hook-form's 'reset' is working properly, input fields are still not emptying after submitReact-hook-form 'reset' 工作正常，提交后输入字段仍未清空
【发布时间】：2020-11-13 09:38:35
【问题描述】：

我尝试使用“reset”功能表单 react-hook-form 但提交后输入字段没有清空。我不知道究竟是为什么，我确定我错过了一些东西，但找不到什么。

这是我的代码：

const Form = () => {
  const [values, setValues] = useState({
    email: "",
    name: "",
    subject: "",
    description: "",
  });

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


  toastr.options = {"positionClass": "toast-top-right","progressBar": true,}
  const onSubmit = (values, e) => {
    
    const { email, name, subject, description } = values;
    axios.post("http://localhost:8080/sendme", {
      email,
      name,
      subject,
      text: description,
    });
   
    e.target.reset();
    toastr.success('Message was sent successfully!');
   
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
    
  };


  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <div className="inputField">
          <input
            className={`${errors.email && "inputError"}`}
            name="email"
            type="email"
            ref={register({ required: true, pattern: /^\S+@\S+$/i })}
            placeholder="Your email *"
            value={values.email}
            onChange={handleChange}
          />
          <ErrorMessage error={errors.email} />
        </div>
        <div className="inputField">
          <input
            className={`${errors.name && "inputError"}`}
            name="name"
            type="text"
            placeholder="Your name *"
            ref={register({ required: true })}
            value={values.name}
            onChange={handleChange}
          />
          <ErrorMessage error={errors.name} />
        </div>
        <div className="inputField">
          <input
            className={`${errors.subject && "inputError"}`}
            name="subject"
            type="text"
            placeholder="Subject *"
            ref={register({ required: true })}
            value={values.subject}
            onChange={handleChange}
          />
          <ErrorMessage error={errors.subject} />
        </div>
        <div className="inputField">
          <p className="reqTxt"> * = Required</p>
          <textarea
            className={`${errors.description && "inputError"}`}
            name="description"
            placeholder="Type your message here *"
            ref={register({ required: true, minLength: 15 })}
            value={values.description}
            onChange={handleChange}
            rows="15"
            cols="80"
          ></textarea>
          <ErrorMessage error={errors.description} />
        </div>

        <button className="btn" onClick={reset} type="submit">
          Send message
        </button>
      </form>
    </div>
  );
};

我已导入重置并将其与 onClick 一起使用，但它似乎不起作用。我应该如何解决这个问题？

【问题讨论】：

我认为你完全错过了反应钩子形式的要点，它是不受控制的。好好阅读这个页面：react-hook-form.com/get-started，我想你会发现自己删除了很多代码。
@Bill 你能更具体地说明我在这里做错了什么吗？
关注此视频：youtube.com/watch?v=bU_eq8qyjic 您会看到缺少的部分。您不需要将 useState 与钩子形式一起使用。
我按照你说的读了更多，这太愚蠢了，我现在设法让它工作，看到我搞砸了，如果你愿意，你可以提交答案，我应该阅读更多下次用什么，谢谢
@Bill 确实，我把它复杂化了

标签： reactjs react-hooks react-hook-form

【解决方案1】：

当你使用 react-hook-form 时，你很可能可以跳过使用 useState：

https://react-hook-form.com/get-started

这是入门页面上的一个简单示例：

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

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  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 name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

【讨论】：

【解决方案2】：

制定逻辑，只要您想重置输入。只需调用reset 方法

import React from "react"
import { useForm } from "react-hook-form"

export default function App() {
  const { register, handleSubmit, errors, reset } = useForm()
  const onSubmit = data => {
    console.log(data)
    reset()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">First name</label>
      <input
        id="firstName"
        type="text"
        aria-invalid={errors.firstName ? "true" : "false"}
        name="firstName"
        ref={register({ required: true })}
      />

      <input type="submit" />
    </form>
  )
}

为你加油！

【讨论】：

这不是docs state 的内容：“建议不要在onReset 或onSubmit 回调中调用reset。” “因为 onSubmit 回调是异步的，并且在回调中重置时包含其验证，所以它会拦截 formState 更新的结果。当您订阅 formState 时会出现问题。”

【解决方案3】：

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

e.target[0].value = ''; // email
e.target[1].value = '';  //name
e.target[2].value = '';  //subject 
e.target[3].value = '';  //description

【讨论】：

【解决方案4】：

不，

要重置所有值，只需使用 reset() 方法。

Documentation

另一方面，我发现这种方法在 Edge 和 FF 上不起作用，但它在 chrome 上完美运行。

【讨论】：

【解决方案5】：

试试这个：

const submit = (data, e)=>{
      console.log(data);
      e.target.reset();
}

【讨论】：

【解决方案6】：

你可以使用

reset({});

这段代码重置了你的所有表单

【讨论】：