组件

四个组件都从 @skyroc/form 与 @skyroc/form/react 导出。

Form

表单容器，创建或接收 FormInstance 并通过 context 向下传递。

导出类型	说明
`FormProps`	完整 props
`FormBaseProps`	基础 props（供二次封装继承）

<Form
  form={form}
  schema={schema}
  onFinish={onSubmit}
>
  {/* fields */}
</Form>

form 不传时 Form 内部自建实例；需要在组件外调用 form.submit() / form.setFieldValue() 就用 useForm() 创建后传进来。

schema 见校验。

Field

字段绑定，自动处理 value / onChange / onBlur。

导出类型	说明
`FieldProps`	`name` 的类型是 `AllPathsKeys<Values>`

<Field name="user.email">
  <input type="email" />
</Field>

子元素通过 @radix-ui/react-slot 注入 props，所以自定义组件只要转发 value / onChange 就能直接用，不需要额外适配层。

需要标注可绑定元素时用 FieldElement，它在 @skyroc/utils/web。

本包的根出口不转发 FieldElement——它依赖 DOM lib，而 @skyroc/native-ui 也消费本包，转发会把 DOM 类型带进无 DOM lib 的 React Native 环境。Web 侧请直接从 @skyroc/utils/web 导入。

每个 Field 是独立订阅单元，见精确订阅。

List

动态数组字段，负责增删改与 key 管理。

导出类型	说明
`ListProps`	`name` 的类型是 `ArrayKeys<Values>`

<List name="tags">
  {({ add, fields, remove }) => (
    <>
      {fields.map((field, i) => (
        <Field
          key={field.key}
          name={`tags.${i}`}
        >
          <input />
        </Field>
      ))}
      <button
        type="button"
        onClick={() => add('')}
      >
        +
      </button>
    </>
  )}
</List>

field.key 是 List 维护的稳定标识。用下标当 React key 会在删除中间项时导致状态错位。

在 List 之外操作同一个数组用 useArrayField。

ComputedField

派生字段——值由其它字段计算得出，并参与表单数据与提交。

导出类型	说明
`ComputedFieldProps`	—

和「在渲染里算一个变量」的区别是:ComputedField 的结果是表单数据的一部分,会进 onFinish 的 values,也能被校验。纯展示用途不需要它,用 useSelector 即可。

Last updated on

组件

Form

Field

List

ComputedField

本页内容