如何在react-hook-form与MUI React中显示表单错误

核心问题 #

SelectField组件内部调用useForm()会创建独立的表单实例，和App中FormProvider提供的全局表单实例完全无关，导致获取的errors并非全局表单的错误信息，自然无法显示验证提示。

修复步骤 #

1. 在SelectField中用useFormContext替代useForm

通过FormProvider全局注入表单实例后，子组件必须通过useFormContext获取全局表单状态，而非重新创建实例。

修改SelectField.jsx：

import { useFormContext } from "react-hook-form"; // 导入useFormContext
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";

export const SelectField = ({ label, name, register, list, ...rest }) => {
  // 替换useForm为useFormContext，获取全局表单实例的状态
  const {
    watch,
    formState: { errors },
  } = useFormContext();

  return (
    <TextField
      label={label}
      required
      select
      name={name}
      fullWidth
      value={watch(name) || ""} // 增加默认空值，避免未选择时value为undefined
      variant="outlined"
      error={!!errors[name]} 
      helperText={errors[name]?.message}
      {...rest}
      {...register(name, {
        required: "This field is required.",
      })}
    >
      {list?.map((item, index) => (
        <MenuItem key={index} value={item.value}>
          {item.label}
        </MenuItem>
      ))}
    </TextField>
  );
};

2. 优化CreateRole组件的register获取方式（可选但更规范）

无需通过props传递register，直接从全局context获取，减少冗余传参：

修改CreateRole.jsx：

import { useFormContext } from "react-hook-form";
import Stack from "@mui/material/Stack";

export const CreateRole = () => {
  const { register } = useFormContext(); // 从context获取全局register

  return (
    <Stack direction="column" gap={3}>
      <SelectField
        label="Role Name"
        name="roleName"
        register={register}
        list={data}
        margin="dense"
      />
    </Stack>
  );
}

3. 确保验证触发条件正常

表单mode设置为onBlur，意味着只有当输入框失去焦点时才会触发验证。测试时需点击输入框后再点击外部区域触发blur事件；若需要实时验证，可将mode改为onChange。

同时确保App组件中正确绑定表单提交逻辑：

const App = () => {
  const formProps = useForm({
    mode: "onBlur",
  });
  const { handleSubmit, formState, register, watch, reset } = formProps;

  const onSubmit = (data) => {
    console.log("表单数据：", data);
    // 处理提交逻辑
  };

  return (
    <FormProvider {...formProps}>
      <DialogComponent content={<CreateRole />} />
      {/* 确保Dialog内部的提交按钮绑定handleSubmit */}
      {/* 示例：<button onClick={handleSubmit(onSubmit)}>提交</button> */}
    </FormProvider>
  );
}

内容的提问来源于stack exchange，提问作者ganesh kaspate