Blackwork

Form

使用 TanStack Form 管理 Blackwork 表单的字段值、校验和提交。

Form

表单需要统一管理字段值、校验和提交时使用 blackwork/form；如果状态已经由应用管理，只需要标签和说明时使用 Field。

blackwork/form 将 TanStack Form 的状态管理与 Blackwork 字段组件结合起来。TanStack Form 负责字段值、校验和提交，Blackwork 提供字段样式和常用控件的绑定。

使用前先安装所需的 TanStack Form 依赖：

Bash
pnpm add @tanstack/react-form

适用场景

  • 需要管理字段值、校验和提交的表单
  • 复用 TextField、TextareaField、CheckboxField

只需要为输入控件添加标签和说明时，使用 Field。

用法

用法

示例

内置字段

内置字段

Optional. Shown on your public profile.

自定义字段

Select、Combobox 等控件需要手动绑定字段状态。可以参考下面的输入框示例，在 form.AppField 中组合 Field 与控件。

自定义字段

API 参考

属性类型默认值说明
form必填{ handleSubmit: () => unknown }—传给 Form 的表单实例，由 useAppForm 返回。
label必填ReactNode—TextField、TextareaField 和 CheckboxField 的可见标签。
descriptionReactNode—显示在控件下方的帮助文字。

说明

  • Form 在提交时调用 form.handleSubmit()。
  • SubmitButton 根据 isSubmitting 设置 Button 的 loading 状态。
  • 单字段规则放在对应字段附近；需要同时比较多个值的规则再放到表单级校验。