Next.js中Shadcn表单点击无响应及受控输入警告求助

一、表单提交无响应的原因及修复 #

提交无响应核心是表单校验未通过，导致react-hook-form未触发onSubmit，具体问题和修复如下：

• Select组件未绑定表单字段值
  现有代码中仅给Select设置了onValueChange={field.onChange}，未绑定field.value，同时错误使用defaultValue，导致react-hook-form无法跟踪字段状态，校验失败。修复示例：

  <Select 
    onValueChange={field.onChange} 
    value={field.value} // 新增绑定字段值
  >
    <FormControl>
      <SelectTrigger className="w-[100px]">
        <SelectValue placeholder="1" />
      </SelectTrigger>
    </FormControl>
    {/* 其余内容保持不变 */}
  </Select>
  

  所有Select组件需移除defaultValue，添加value={field.value}绑定。

• Zod Schema存在未实现的必填字段
  Schema中定义了location、recurring字段，但表单未提供对应输入，这些字段默认值为undefined，而zod的z.string()、z.boolean()默认要求非空，导致校验失败。修复方式：

  export const reminderFormSchema = z.object({
    title: z.string().min(1, { message: "Title required!" }),
    description: z.string().max(160).optional(),
    location: z.string().optional(), // 未实现字段标记为可选
    recurring: z.boolean().optional(), // 未实现字段标记为可选
    recurringDigit: z.string(),
    recurringString: z.string(),
    priority: z.string(),
  });
  

二、受控输入警告的原因及修复 #

警告源于表单初始化时部分字段无初始值，导致输入组件从非受控转为受控状态，违反React对输入组件状态一致性的要求。

修复方式：给useForm配置defaultValues，确保所有字段初始化时都有明确值：

const form = useForm<ReminderFormSchemaType>({
  resolver: zodResolver(reminderFormSchema),
  defaultValues: {
    title: "",
    description: "",
    location: "",
    recurring: false,
    recurringDigit: "1",
    recurringString: "Minute(s)",
    priority: "High",
  },
});

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