reactjs - react-hook-form 提交后无法正确验证 value 和 onChange

Question

我有组件：

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

  const [val, setVal] = useState("");

  const handleSubmitForm = () => console.log("send!");

  const handleChange = (e) => {
    setVal(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit(handleSubmitForm)}>
      <input
        type="text"
        name="test"
        value={val}
        ref={register({ required: "The field is required." })}
        onChange={handleChange}
      />
      {errors.test && errors.test.message}
      <button type="submit">Send</button>
    </form>
  );
};

当我单击“提交”时，react-hook-form显示错误消息：“该字段是必填项。'。当我想写单词“TEST”，接下来我尝试删除这个文本，例如选择所有文本并单击 Backspace 按钮，然后我无法从输入中删除这个文本，但显示有关空值的消息。

我如何使用react-hook-form和value事件onChange？

演示代码框

标签： reactjsonchangereact-hook-form

Answer 1

不需要有 value 和 onChange。您可以使用不受控制的形式，如果您需要其中一个输入的值，您可以简单地观察它;-)

const FormComponent = () => {
   const { register, handleSubmit, watch, errors } = useForm(); 
   const handleSubmitForm = (data) => console.log(data);
 
   const valueOfTest = watch('test');

   useEffect(() => {
      //consider this to be onchange function
      doSomething(valueOfTest);
   }, [valueOfTest]);
 
   return (
     <form onSubmit={handleSubmit(handleSubmitForm)}>
       <input
         type="text"
         name="test"
         ref={register({ required: "The field is required." })}
       />
       {errors.test && errors.test.message}
       <button type="submit">Send</button>
     </form>
   );
 };