ExFormAllControlsExample 示例

该示例演示了如何使用 @fluentui-extension/ex-form 结合 Fluent UI v9 组件库和 react-hook-form 实现表单控件的统一管理与校验。

主要功能

• 表单状态管理：通过 useForm 管理表单状态和校验规则。
• 表单控件集成：集成了 Fluent UI v9 的常用表单控件，包括输入框、文本域、选择器、单选组、复选框、开关、可搜索下拉、滑块、数字微调等。
• 表单校验：支持必填校验等规则，错误信息自动展示。
• 表单操作：提供“重置”和“提交”按钮，支持重置表单和提交数据。

代码结构说明

• ExForm：表单容器组件，接收 form 实例，实现表单数据与控件的自动绑定。
• ExForm.Item：表单项组件，负责单个控件的 label、校验、错误提示等逻辑。
• 各种 Fluent UI 控件通过 ExForm.Item 包裹，实现与表单状态的自动同步。
• handleSubmit：表单提交处理函数，提交时打印表单数据。
• reset：重置表单到初始状态。

ExForm 及 ExForm.Item 字段说明

| 字段名 | 说明 | | ----------- | ------------------------------------------------------------ | | ExForm | 表单容器组件，接收 form 实例（由 useForm 创建），实现表单数据与控件的自动绑定。 | | ExForm.Item | 表单项组件，负责单个控件的 label、校验、错误提示等逻辑。常用属性如下： | | name | 字段名，必填。用于表单数据的 key，与 useForm 的 defaultValues 对应。 | | label | 字段标签，显示在控件前。 | | required | 是否必填，设置后会自动添加必填校验。 | | rules | 校验规则，支持 react-hook-form 的校验配置。 | | valuePropName | 指定控件的值属性（如 checked 用于 Checkbox/Switch），默认为 value。 | | 其他 | 通过 ExForm.Item 包裹的控件会自动与表单状态同步，无需手动绑定 value/onChange。 |

示例：

<ExForm form={form}>
    <ExForm.Item
        name="input"
        label="输入框"
        required
        rules={{ required: "必填" }}
    >
        <Input placeholder="请输入" />
    </ExForm.Item>
</ExForm>

使用方法

1. 引入 ExForm 及所需 Fluent UI 组件。
2. 使用 useForm 创建表单实例，设置 defaultValues。
3. 使用 ExForm 包裹所有表单项，每个控件通过 ExForm.Item 进行绑定。
4. 配置校验规则（如 rules={{ required: "必填" }}）。
5. 通过 handleSubmit 处理表单提交，通过 reset 重置表单。

适用场景

• 需要统一管理和校验表单的 React 项目
• 使用 Fluent UI v9 作为 UI 组件库
• 希望简化表单开发、提升开发效率

注意：本示例仅用于演示表单控件的集成与基本用法，实际项目中可根据需求扩展校验规则、表单项类型等。

import { ExForm } from "@fluentui-extension/ex-form";
import {
  Button,
  Checkbox,
  Combobox,
  Input,
  Radio,
  RadioGroup,
  Select,
  Slider,
  SpinButton,
  Switch,
  Textarea
} from "@fluentui/react-components";
import { useForm } from "react-hook-form";

export default function ExFormAllControlsExample() {
  const form = useForm({
    defaultValues: {
      input: "",
      textarea: "",
      select: "Green",
      radio: "a",
      checkbox: false,
      switch: true,
      combobox: "",
      slider: 30,
      spin: 5,
    },
  });

  const { handleSubmit, reset } = form;

  return (
    <div
      style={{
        width: 480,
        margin: "0 auto",
        display: "flex",
        flexDirection: "column",
        gap: 20,
      }}
    >
      <h2>Fluent UI v9 表单控件示例</h2>
      <ExForm form={form}>
        <ExForm.Item
          name="input"
          label="输入框"
          required
          rules={{ required: "必填" }}
        >
          <Input placeholder="请输入" />
        </ExForm.Item>

        <ExForm.Item name="textarea" label="多行文本">
          <Textarea placeholder="请输入内容" />
        </ExForm.Item>

        <ExForm.Item name="select" label="选择器">
          <Select>
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
          </Select>
        </ExForm.Item>

        <ExForm.Item name="radio" label="单选组">
          <RadioGroup>
            <Radio value="a" label="选项 A"></Radio>
            <Radio value="b" label="选项 B"></Radio>
          </RadioGroup>
        </ExForm.Item>

        <ExForm.Item name="checkbox" label="复选框" valuePropName="checked">
          <Checkbox label="我同意条款" />
        </ExForm.Item>

        <ExForm.Item name="switch" label="开关" valuePropName="checked">
          <Switch />
        </ExForm.Item>

        <ExForm.Item name="combobox" label="可搜索下拉">
          <Combobox
            placeholder="搜索或选择"
            defaultActiveOption="apple"
            options={["apple", "banana", "cherry"]}
          />
        </ExForm.Item>

        <ExForm.Item name="slider" label="滑块">
          <Slider min={0} max={100} step={1} />
        </ExForm.Item>

        <ExForm.Item name="spin" label="数字微调">
          <SpinButton min={0} max={10} step={1} />
        </ExForm.Item>

        <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
          <Button type="button" onClick={() => reset()}>
            重置
          </Button>
          <Button
            type="button"
            appearance="primary"
            onClick={handleSubmit((data) => console.log("提交结果:", data))}
          >
            提交
          </Button>
        </div>
      </ExForm>
    </div>
  );
}