Next.js13中集成带校验的MUI Autocomplete到React Hook Form

核心思路 #

用react-hook-form的Controller组件包裹自定义HsnComp，实现表单状态绑定、校验触发和错误信息传递；同时调整HsnComp内部逻辑，适配受控组件模式并处理错误提示。

步骤1：调整HsnComp组件 #

修改hsnComp.tsx，接收Controller传递的状态和错误信息，将Autocomplete改为受控模式，同时在TextField中展示错误样式与提示：

// hsnComp.tsx
import { useState, useEffect } from 'react';
import { Autocomplete, TextField } from '@mui/material';
import { fetchHsnCodes } from '@/lib/actions'; // 你的数据获取函数

interface HsnOption {
  hsCode: string;
  description: string;
}

interface HsnCompProps {
  field: {
    value: HsnOption | null;
    onChange: (value: HsnOption | null) => void;
  };
  error?: boolean;
  helperText?: string;
}

export default function HsnComp({ field, error, helperText }: HsnCompProps) {
  const [options, setOptions] = useState<HsnOption[]>([]);

  useEffect(() => {
    const loadOptions = async () => {
      const data = await fetchHsnCodes();
      setOptions(data);
    };
    loadOptions();
  }, []);

  return (
    <Autocomplete
      value={field.value}
      onChange={(_, newValue) => field.onChange(newValue)}
      options={options}
      getOptionLabel={(option) => `${option.hsCode} - ${option.description}`}
      renderInput={(params) => (
        <TextField
          {...params}
          label="HSN编码"
          variant="outlined"
          fullWidth
          error={error}
          helperText={helperText}
        />
      )}
    />
  );
}

步骤2：在页面中用Controller集成组件 #

修改page.tsx，引入Controller和Zod校验规则，将HsnComp与react-hook-form绑定：

// page.tsx
import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import HsnComp from '@/components/hsnComp';

// Zod校验规则
const FormSchema = z.object({
  hsn: z.object({
    hsCode: z.string().nonempty('HSN编码不能为空'),
    description: z.string().nonempty('HSN描述不能为空'),
  })
  .nullable()
  .refine(val => val !== null, '请选择有效的HSN编码'),
});

type FormValues = z.infer<typeof FormSchema>;

export default function FormPage() {
  const { control, handleSubmit, formState: { errors } } = useForm<FormValues>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      hsn: null,
    },
  });

  const onSubmit = (data: FormValues) => {
    // 处理表单提交逻辑
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="hsn"
        control={control}
        render={({ field }) => (
          <HsnComp
            field={field}
            error={!!errors.hsn}
            helperText={errors.hsn?.message}
          />
        )}
      />
      <button type="submit" style={{ marginTop: 16 }}>提交表单</button>
    </form>
  );
}

关键说明 #

• Controller接管HsnComp的状态管理，自动处理字段注册、值同步和校验触发，无需手动回调设置表单值。
• Zod规则通过nullable().refine()强制用户选择有效HSN选项，同时对编码和描述做非空校验，满足必填要求。
• HsnComp通过error和helperText接收表单错误信息，直接映射到Material-UI TextField的错误样式和提示文本，实现统一的错误展示。

内容的提问来源于stack exchange，提问作者Amith A G