React使用react-hook-form开发表单时TextField无法输入问题求助

问题根因 #

• 核心冲突：你同时为TextField配置了自定义的value、onChange属性，又在后续展开了register()的返回值。register本身会返回受控表单需要的onChange、name、ref等属性，后传入的属性会覆盖前面的自定义配置，导致你写的handleInputChange完全没有触发，输入时本地状态不会更新，文本框就处于“锁死”状态。
• 字段不匹配：姓名字段的name属性写的是nome，但你本地useState里定义的字段是name，就算自定义事件生效，也没法更新到对应状态。
• 冗余逻辑：react-hook-form的handleSubmit已经内置了阻止默认表单提交的逻辑，你在onSubmit里写的e.preventDefault()是多余的，反而可能导致提交逻辑异常。

修复方案 #

方案1：移除冗余的useState，完全由react-hook-form管理表单状态（推荐） #

react-hook-form本身就内置了表单值管理、校验、重置的能力，不需要额外用useState双重管理，修改后代码如下：

import React from "react";

import {
  TextField,
  Typography,
  Divider,
  Button,
} from "@mui/material";
import { MdError } from "react-icons/md";
import { BsArrowRight } from "react-icons/bs";
import "../style/contactform.scss";

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

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset, // 内置重置表单方法
  } = useForm({
    defaultValues: { // 初始值在这里配置
      nome: "",
      email: ""
    }
  });

  const onSubmit = (data) => {
    // 这里的data就是提交的表单值，不需要自己从state拿
    console.log("form submit", data);
    reset(); // 调用reset清空表单
  };

  return (
    <form className="contact-form" onSubmit={handleSubmit(onSubmit)}>
      <Typography variant="h4" className="form-title">
        Be the first.
      </Typography>

      <div className="form-component">
        <TextField
          id="standard-basic"
          label="Nome*"
          variant="standard"
          {...register("nome", {
            required: true,
          })}
        />

        {errors?.nome?.type === "required" && (
          <MdError className="form-validation-icon" />
        )}
      </div>

      <Divider className="form-hr" />

      <div className="form-component">
        <TextField
          id="standard-basic-email" // 注意id不要重复
          label="Email*"
          variant="standard"
          {...register("email", {
            required: true,
            pattern: {
              value:
                /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
            },
          })}
        />

        {errors?.email?.type === "required" && (
          <MdError className="form-validation-icon" />
        )}
        {errors?.email?.type === "pattern" && (
          <Typography variant="p" className="form-validation-email">
            Inserisci un indirizzo email valido.
          </Typography>
        )}
      </div>

      <Divider className="form-hr" />

      <Button className="form-submit" type="submit" variant="contained">
        <BsArrowRight />
      </Button>
    </form>
  );
};

export default ContactForm;

方案2：如果必须保留本地useState管理状态 #

需要将自定义的更新逻辑和react-hook-form的逻辑结合，同时统一字段名：

1. 把本地state的字段name改为nome，和表单的name属性对齐
2. 不要直接展开register，改用Controller组件适配MUI的封装组件，或者手动合并onChange逻辑：

// 示例：手动合并onChange
<TextField
  id="standard-basic"
  label="Nome*"
  variant="standard"
  name="nome"
  value={state.nome}
  onChange={(e) => {
    handleInputChange(e);
    register("nome").onChange(e); // 手动触发react-hook-form的更新
  }}
/>

同时修改onSubmit移除e.preventDefault()即可。

内容的提问来源于stack exchange，提问作者Luca Natale