// 一个典型的 useState 受控表单输入框
function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { ConfigProvider, App as AntdApp } from "antd";
import zhCN from "antd/locale/zh_CN";
import router from "@/router";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <AntdApp>
        <RouterProvider router={router} />
      </AntdApp>
    </ConfigProvider>
  </React.StrictMode>
);

import { Outlet } from "react-router-dom";
import { Layout, Typography } from "antd";

const { Header, Content } = Layout;

export default function App() {
  return (
    <Layout>
      <Header className="flex items-center">
        <Typography.Title level={3} className="!text-white !m-0">
          RHF + Zod 实战
        </Typography.Title>
      </Header>
      <Content className="p-6">
        <div className="p-6 bg-white rounded-md">
          <Outlet />
        </div>
      </Content>
    </Layout>
  );
}

import { createBrowserRouter } from 'react-router-dom'
import App from '@/App'
import SimpleForm from '@/pages/SimpleForm'

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        index: true,
        element: <SimpleForm />,
      },
    ],
  },
])

export default router

// src/pages/SimpleForm.tsx (片段 1)

import { useForm, type SubmitHandler } from "react-hook-form";
import { userSchema, type UserSchema } from "@/schemas/userSchema";

export default function SimpleForm() {
  // 初始化 useForm，并传入 TypeScript 类型
  const {
    // ... 稍后我们将从这里解构出所需函数
  } = useForm<UserSchema>();

  // ... JSX
}

// src/pages/SimpleForm.tsx (片段 2)

import { zodResolver } from "@hookform/resolvers/zod";
// ...其他 imports

export default function SimpleForm() {
  const {
    // ...
  } = useForm<UserSchema>({
    resolver: zodResolver(userSchema), // 👈 配置 Zod 解析器
  });
  // ...
}

// src/pages/SimpleForm.tsx (片段 3)

export default function SimpleForm() {
  const {
    register, // 👈 解构出 register 函数
    // ...
  } = useForm<UserSchema>({ /* ...配置 */ });

  return (
    <form>
      <label htmlFor="username">Username</label>
      <input
        id="username"
        // 👇 通过展开运算符，将字段 "username" 与此 input 元素绑定
        {...register("username")}
      />
    </form>
  );
}

// src/pages/SimpleForm.tsx (片段 4)

export default function SimpleForm() {
  const {
    register,
    handleSubmit, // 👈 解构出提交处理器
    formState: { errors }, // 👈 解构出错误状态对象
  } = useForm<UserSchema>({ /* ...配置 */ });

  // 定义一个仅在验证成功时才会执行的回调函数
  const onSubmit: SubmitHandler<UserSchema> = (data) => {
    alert(`提交成功: ${JSON.stringify(data)}`);
  };

  return (
    // 👇 将我们的成功回调传递给 handleSubmit
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      {/* 👇 根据 errors 对象中是否存在对应字段的错误来条件渲染错误信息 */}
      {errors.username && (
        <p>{errors.username.message}</p>
      )}
    </form>
  );
}

import { useForm, type SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { userSchema, type UserSchema } from "@/schemas/userSchema";

export default function SimpleForm() {
  // 1.使用useForm创建表单
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<UserSchema>({
    resolver: zodResolver(userSchema), // 2.通过zodResolver将Zod Schema转换为React Hook Form的Resolver
  });

  // 3.定义onSubmit函数
  const onSubmit: SubmitHandler<UserSchema> = (data) => {
    alert(`提交成功: ${JSON.stringify(data)}`);
  };

  return (
    // 4.创建原生HTML表单，通过绑定事件触发表单验证
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-4">Zod 4 Form</h1>
      <div>
        <label htmlFor="username" className="block mb-1">
          Username
        </label>
        <input
          id="username"
          //   5.通过register注册表单元素
          {...register("username")}
          className="block w-full p-2 mb-1 border border-gray-300 rounded"
        />
        {/* 6.通过errors对象获取表单验证错误信息 */}
        {errors.username && (
          <p className="text-red-500 text-xs">{errors.username.message}</p>
        )}
      </div>
      <div className="mt-4">
        <label htmlFor="email" className="block mb-1">
          Email
        </label>
        <input
          id="email"
          {...register("email")}
          className="block w-full p-2 mb-1 border border-gray-300 rounded"
        />
        {errors.email && (
          <p className="text-red-500 text-xs">{errors.email.message}</p>
        )}
      </div>
      <button
        type="submit"
        className="px-4 py-2 mt-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Submit
      </button>
    </form>
  );
}

import { useForm, type SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { userSchema, type UserSchema } from "@/schemas/userSchema";
import { Form, Typography, Input, Button } from "antd";
import { Controller } from "react-hook-form";

export default function SimpleForm() {
  // 1.使用useForm创建表单
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<UserSchema>({
    resolver: zodResolver(userSchema), // 2.通过zodResolver将Zod Schema转换为React Hook Form的Resolver
    mode: "onChange", // 实时验证
    defaultValues: {
      username: "",
      email: "",
    },
  });

  // 3.定义onSubmit函数
  const onSubmit: SubmitHandler<UserSchema> = (data) => {
    alert(`提交成功: ${JSON.stringify(data)}`);
  };

  return (
    // 使用 Antd 的 Form 组件，并通过 onFinish 绑定 handleSubmit
    <Form
      onFinish={handleSubmit(onSubmit)}
      className="max-w-md"
      layout="vertical"
    >
      <Typography.Title level={2} className="text-center !mb-6">
        RHF + Ant Design Form
      </Typography.Title>
      {/* 用户名输入框 */}
      <Form.Item
        label="Username"
        validateStatus={errors.username ? "error" : ""}
        help={errors.username?.message}
      >
        <Controller
          name="username"
          control={control}
          render={({ field }) => (
            // field 对象包含了 value, onChange, onBlur 等所有必要属性
            // 直接将其解构给 Antd Input 即可完成绑定
            <Input {...field} placeholder="请输入用户名" />
          )}
        />
      </Form.Item>

      {/* 邮箱输入框 */}
      <Form.Item
        label="Email"
        validateStatus={errors.email ? "error" : ""}
        help={errors.email?.message}
      >
        <Controller
          name="email"
          control={control}
          render={({ field }) => <Input {...field} placeholder="请输入邮箱" />}
        />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="w-full">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { userSchema, type UserSchema } from '@/schemas/userSchema';

function UserProfileForm() {
  // `useForm` 同时接收配置（输入）并返回 API（输出）
  const {
    // --- 输出：我们从中解构出的核心 API ---

    // API 1: 用于连接第三方 UI 组件的 `control` 对象
    control,

    // API 2: 负责处理验证和提交的 `handleSubmit` 函数
    handleSubmit,

    // API 3: 包含错误信息、是否修改等状态的 `formState`
    formState: { errors, isDirty, isValid },

    // API 4: 用于监听字段变化的 `watch` 函数
    watch,
    
    // API 5: 用于重置表单的 `reset` 函数
    reset,

  } = useForm<UserSchema>({
    // --- 输入：我们传入的配置对象 ---

    // 配置 1: 指定 Zod 作为验证器
    resolver: zodResolver(userSchema),

    // 配置 2: 设置验证在字段失去焦点时触发
    mode: 'onBlur',

    // 配置 3: 提供完整的默认值结构，以获得最佳的类型推断和重置行为
    defaultValues: {
      username: '',
      email: '',
    },
  });

  // ... 在下面的 JSX 中，我们就可以使用上面解构出的 control, handleSubmit, errors 等 API 了
}

import { useForm, type SubmitHandler } from "react-hook-form";
// ... 其他 imports

export default function SimpleAntdForm() {
  const { control, handleSubmit, formState: { errors } } = useForm<UserSchema>({
    // ... 配置
  });

  // 这个函数只关心一件事：当数据有效时，该做什么
  const onValid: SubmitHandler<UserSchema> = (data) => {
    alert(`提交成功: ${JSON.stringify(data)}`);
    // 在这里调用 API
  };

  // 可选的第二个回调，处理验证失败
  const onInvalid = () => {
    console.log("表单验证失败！");
  };

  return (
    // 👇 Ant Design 的 Form 使用 `onFinish` 属性来处理提交
    <Form onFinish={handleSubmit(onValid, onInvalid)}>
      {/* ... 表单项 ... */}
    </Form>
  );
}

// 这种重复模式是“坏味道”
<Form.Item
  label="Username"
  validateStatus={errors.username ? "error" : ""}
  help={errors.username?.message}
>
  <Controller
    name="username"
    control={control}
    render={({ field }) => <Input {...field} />}
  />
</Form.Item>

// src/components/form/ControlledInput.tsx
import {
  Controller,
  useFormContext,
  type FieldValues,
  type Path,
} from "react-hook-form";
import { Form, Input, type InputProps } from "antd";

// 使用泛型 T 来确保 name 属性的类型安全
type ControlledInputProps<T extends FieldValues> = {
  name: Path<T>; // `Path<T>` 确保 name 是 T 类型中的一个合法 key
  label: string;
} & InputProps; // 继承 antd Input 的所有原生属性，如 placeholder

export function ControlledInput<T extends FieldValues>({
  name,
  label,
  ...rest // 剩余的 props (如 placeholder) 将直接传递给 antd Input
}: ControlledInputProps<T>) {
  // 从 FormProvider 获取 control
  const { control } = useFormContext<T>();

  return (
    // Controller 是连接 RHF 内核与 UI 组件的核心
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState }) => {
        // 👇 使用 fieldState 获取该字段的错误信息（支持嵌套路径）
        const errorMessage = fieldState.error?.message;

        return (
          // Form.Item 负责布局、标签和错误信息的展示
          <Form.Item
            label={label}
            validateStatus={errorMessage ? "error" : ""}
            help={errorMessage}
          >
            {/* 将 RHF 的 field 属性（value, onChange, onBlur 等）注入 antd Input */}
            <Input {...field} {...rest} />
          </Form.Item>
        );
      }}
    />
  );
}

import { useForm, FormProvider, type SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { userSchema, type UserSchema } from "@/schemas/userSchema";
import { Form, Typography, Button } from "antd";
import { ControlledInput } from "@/components/form/ControlledInput"; // 👈 引入我们的封装组件

export default function SimpleForm() {
  // `useForm` 返回的方法和状态可以打包传递给 FormProvider
  const methods = useForm<UserSchema>({
    resolver: zodResolver(userSchema),
    mode: "onChange",
    defaultValues: { username: "", email: "" },
  });

  const onSubmit: SubmitHandler<UserSchema> = (data) => {
    alert(`提交成功: ${JSON.stringify(data)}`);
  };

  return (
    // 👇 用 FormProvider 包裹，使得 useFormContext 能在深层组件中被访问
    <FormProvider {...methods}>
      <Form
        onFinish={methods.handleSubmit(onSubmit)}
        layout="vertical"
        className="max-w-md"
      >
        <Typography.Title level={2}>RHF + Ant Design (封装版)</Typography.Title>

        {/* 👇 看！现在添加一个表单域是多么的声明式和简洁 */}
        <ControlledInput<UserSchema>
          name="username"
          label="Username"
          placeholder="请输入用户名"
        />

        <ControlledInput<UserSchema>
          name="email"
          label="Email"
          placeholder="请输入邮箱"
        />

        <Form.Item>
          <Button type="primary" htmlType="submit" className="w-full">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </FormProvider>
  );
}

import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { eventSchema, type EventSchema } from "@/schemas/eventSchema";
import { Form, Input, Button, Typography } from "antd";

export default function EventForm() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(eventSchema),
    defaultValues: {
      eventName: "RHF + Zod 分享会",
      age: "25", // 字符串，因为 input 输入的是字符串
      eventDate: new Date().toISOString().split("T")[0], // string 格式
    },
  });

  // 👇 注意这里的 `data` 参数，其类型是 EventSchema（Zod 转换后的类型）
  // Zod 已经为我们处理好了类型转换
  const onSubmit = async (data: any) => {
    // zodResolver 已经验证并转换了数据
    // data 的实际类型是 EventSchema
    const validatedData = data as EventSchema;

    console.log("表单提交的数据:", validatedData);

    // 你可以验证 validatedData 中 age 和 eventDate 的类型
    console.log("年龄的类型:", typeof validatedData.age); // "number"
    console.log("活动日期的实例:", validatedData.eventDate instanceof Date); // true

    alert(`提交成功: \n${JSON.stringify(validatedData, null, 2)}`);
  };

  return (
    <Form
      onFinish={handleSubmit(onSubmit)}
      layout="vertical"
      className="max-w-md"
    >
      <Typography.Title level={2}>活动报名</Typography.Title>

      <Form.Item
        label="活动名称"
        help={errors.eventName?.message}
        validateStatus={errors.eventName ? "error" : ""}
      >
        <Controller
          name="eventName"
          control={control}
          render={({ field }) => <Input {...field} />}
        />
      </Form.Item>

      <Form.Item
        label="年龄"
        help={errors.age?.message}
        validateStatus={errors.age ? "error" : ""}
      >
        <Controller
          name="age"
          control={control}
          render={({ field }) => (
            // 即便使用 Antd 的 Input，输入的值也是 string，z.coerce 在此生效
            <Input
              {...field}
              value={field.value as string}
              placeholder="请输入年龄"
            />
          )}
        />
      </Form.Item>

      <Form.Item
        label="活动日期"
        help={errors.eventDate?.message}
        validateStatus={errors.eventDate ? "error" : ""}
      >
        <Controller
          name="eventDate"
          control={control}
          render={({ field }) => (
            // 使用原生 input type="date" 来演示从 string 到 Date 的转换
            <input
              type="date"
              {...field}
              value={field.value as string}
              className="ant-input"
            />
          )}
        />
      </Form.Item>

      <Button type="primary" htmlType="submit" className="w-full">
        报名
      </Button>
    </Form>
  );
}

import { useForm, useFieldArray, FormProvider } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { teamSchema, type TeamSchema } from "@/schemas/teamSchema";
import { Form, Button, Typography } from "antd";

export default function DynamicForm() {
  // 1. 初始化 useForm，提供 resolver 和 defaultValues
  const methods = useForm<TeamSchema>({
    resolver: zodResolver(teamSchema),
    defaultValues: {
      teamName: "精英团队",
      members: [{ name: "张三", role: "前端开发" }], // 👈 为动态数组提供初始值
    },
  });

  // 2. 初始化 useFieldArray
  const { fields, append, remove } = useFieldArray({
    control: methods.control, // 👈 必须传入 control
    name: "members",          // 👈 指定要操作的数组字段名
  });

  const onSubmit = (data: TeamSchema) => {
    alert(`提交成功: \n${JSON.stringify(data, null, 2)}`);
  };

  // ... 稍后填充 JSX
  return (
    <FormProvider {...methods}>
      <Form onFinish={methods.handleSubmit(onSubmit)} layout="vertical">
        {/* ... */}
      </Form>
    </FormProvider>
  );
}

// ... 在 Form 组件内部 ...
<Typography.Title level={2}>动态团队管理</Typography.Title>
{/* ... 渲染 teamName 输入框 ... */}

{/* 👇 核心：遍历 `fields` 数组来渲染每个动态表单项 */}
{fields.map((field, index) => (
  // 👇 关键：key 必须使用 field.id，而不是 index
  <div key={field.id} className="flex items-center space-x-2 mb-4">
    {/* 注意这里的 name 属性构造方式，
      它告诉 RHF 这个输入框属于 'members' 数组的第 'index' 项的 'name' 字段
    */}
    <input
      {...methods.register(`members.${index}.name`)}
      placeholder="成员姓名"
      className="ant-input"
    />
    <input
      {...methods.register(`members.${index}.role`)}
      placeholder="成员角色"
      className="ant-input"
    />
    {/* 删除按钮稍后实现 */}
  </div>
))}
{/* ... */}

// ... 在 fields.map 内部，为每个成员添加删除按钮 ...
<div key={field.id} className="flex items-center space-x-2 mb-4">
  {/* ... input 字段 ... */}
  <Button type="primary" danger onClick={() => remove(index)}>
    删除
  </Button>
</div>

// ... 在 fields.map 外部，添加一个用于增加成员的按钮 ...
<Button
  type="dashed"
  // 👇 append 一个新的、符合 Schema 结构的空对象
  onClick={() => append({ name: "", role: "" })} 
  className="w-full mt-4"
>
  + 添加新成员
</Button>

import { useForm, useFieldArray, FormProvider } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { teamSchema, type TeamSchema } from "@/schemas/teamSchema";
import { Form, Button, Typography, Card, Space } from "antd";
import { ControlledInput } from "@/components/form/ControlledInput";

export default function DynamicForm() {
  const methods = useForm<TeamSchema>({
    resolver: zodResolver(teamSchema),
    defaultValues: {
      teamName: "精英团队",
      members: [{ name: "张三", role: "前端开发" }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control: methods.control,
    name: "members",
  });

  const onSubmit = (data: TeamSchema) => {
    alert(`提交成功: \n${JSON.stringify(data, null, 2)}`);
  };

  return (
    <FormProvider {...methods}>
      <Form
        onFinish={methods.handleSubmit(onSubmit)}
        layout="vertical"
        className="max-w-2xl"
      >
        <Typography.Title level={2}>动态团队管理</Typography.Title>
        <ControlledInput<TeamSchema> name="teamName" label="团队名称" />
        
        <Card title="团队成员" className="mt-4">
          {fields.map((field, index) => (
            <Space key={field.id} className="flex mb-4" align="baseline">
              <ControlledInput<TeamSchema>
                name={`members.${index}.name`}
                label={`成员 ${index + 1} 姓名`}
              />
              <ControlledInput<TeamSchema>
                name={`members.${index}.role`}
                label="角色"
              />
              <Button type="primary" danger onClick={() => remove(index)}>
                删除
              </Button>
            </Space>
          ))}
        </Card>

        <Button
          type="dashed"
          onClick={() => append({ name: "", role: "" })}
          className="w-full mt-4"
        >
          + 添加新成员
        </Button>

        <Button type="primary" htmlType="submit" className="w-full mt-6">
          提交团队信息
        </Button>
      </Form>
    </FormProvider>
  );
}

import { useFieldArray, useFormContext } from 'react-hook-form';
import { Button, Space } from 'antd';
import { ControlledInput } from './ControlledInput';
import { type SurveySchema } from '@/schemas/surveySchema';

interface QuestionOptionsProps {
  questionIndex: number;
}

export function QuestionOptions({ questionIndex }: QuestionOptionsProps) {
  const { control } = useFormContext<SurveySchema>();

  // 👇 内层的 useFieldArray
  const { fields, append, remove } = useFieldArray({
    control,
    // 关键点：name 必须通过模板字符串构造出指向嵌套数组的完整路径
    name: `questions.${questionIndex}.options`, 
  });

  return (
    <div className="pl-8">
      {fields.map((option, optionIndex) => (
        <Space key={option.id} className="flex mb-2" align="baseline">
          <ControlledInput<SurveySchema>
            name={`questions.${questionIndex}.options.${optionIndex}.value`}
            label={`选项 ${optionIndex + 1}`}
          />
          <Button danger onClick={() => remove(optionIndex)}>删除选项</Button>
        </Space>
      ))}
      <Button type="link" onClick={() => append({ value: '' })}>
        + 添加选项
      </Button>
    </div>
  );
}