reactjs - 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;

标签： reactjsreact-hook-form

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但我从注册文档中看到的。这可能是您需要的：

<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);
  }