React-hook-form 輸入類型值不起作用

Question

每次我重新加載頁面時，這就是我在輸入類型上遇到的錯誤。

而這正是我想要的。

我不知道[object Object]來自哪里，但我認為我的代碼有問題。 我正在使用 react-hook-form 進行驗證和其他任何事情。 你能幫助我嗎？ 我不知道我的代碼有什么問題以及如何修復它。

這是代碼

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

function Account() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    criteriaMode: "all",
  });

  const [first_name, setFirstName] = useState("");

  function onChangeFirstName(e) {
    setFirstName(e.target.value);
  }

  const onSubmit = (data) => {
    console.log(data);

    setFirstName("");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="p-5">
        <input
          className="border-2 border-black my-5 placeholder-gray-500 rounded-2xl h-12 p-5 outline-none"
          type="text"
          id="firstname"
          name="firstname"
          placeholder="First Name"
          onChange={onChangeFirstName}
          {...register("firstname", {
            required: true,
            value: { first_name },
            maxLength: 20,
          })}
        />
        {errors?.firstname?.type === "required" && (
          <p className="text-red-600 text-sm cursor-default">
            *First name is required
          </p>
        )}
        {errors?.firstname?.type === "maxLength" && (
          <p className="text-red-600 text-sm cursor-default">
            *First name cannot exceed 20 characters
          </p>
        )}
      </div>
      <input className="p-5 ml-5" type="submit" />
    </form>
  );
}

export default Account;

Answer 1

問題是在

<input
  ...
  {...register("firstname", {
    required: true,
    value: { first_name }, // here, value is an object, and toString() will print [object Object]
    maxLength: 20,
  })}

我對react-hook-form不是很熟悉，但是我從register docs 中看到的。 這就是你可能需要的：

<input
  className="border-2 border-black my-5 placeholder-gray-500 rounded-2xl h-12 p-5 outline-none"
  type="text"
  id="firstname"
  name="firstname"
  {...register("firstname", {
    required: true,
    maxLength: 20,
  })}
  placeholder="First Name"
/>

也不再需要useState ，所以刪除

const [first_name, setFirstName] = useState("");

  function onChangeFirstName(e) {
    setFirstName(e.target.value);
  }

Answer 2

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

function Account() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    criteriaMode: "all"
  });

  const [first_name, setFirstName] = useState("");

  function onChangeFirstName(e) {
    setFirstName(e.target.value);
  }

  const onSubmit = (data) => {
    console.log(data);

    setFirstName("");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="p-5">
        <input
          className="border-2 border-black my-5 placeholder-gray-500 rounded-2xl h-12 p-5 outline-none"
          // type="text"
          // id="firstname"
          // name="firstname"
          // onChange={onChangeFirstName}
          placeholder="First Name"
          {...register("firstname", {
            required: true,
            // value: {first_name}
            value: first_name,
            maxLength: 20
          })}
        />
        {errors?.firstname?.type === "required" && (
          <p className="text-red-600 text-sm cursor-default">
            *First name is required
          </p>
        )}
        {errors?.firstname?.type === "maxLength" && (
          <p className="text-red-600 text-sm cursor-default">
            *First name cannot exceed 20 characters
          </p>
        )}
      </div>
      <input className="p-5 ml-5" type="submit" />
    </form>
  );
}

export default Account;