Skip to content

Latest commit

 

History

History
45 lines (29 loc) · 2.48 KB

FormRenderer.md

File metadata and controls

45 lines (29 loc) · 2.48 KB
Raw

FormRenderer 组件

FormRenderer 组件强依赖于 ant-design#Form 组件，所以它支持 ant-design#Form 的所有 API。除此之外，为了实现 表单联动 和 完全基于 JSON 渲染 等特性，在 ant-desgin Form Props 的基础上，还有一些额外的 props。


FormRenderer Props

  • jsonConfig 解析后的表单 json 配置，详情看这里
  • formServicePool FormService 的集合，详情看这里
  • rowProps 用于表单的排版布局，与 ant-design#Row 一致
  • defaultColSpan 用于表单项的默认占用栅格大小, 默认为24
  • ruleMap 自定义的表单校验器的集合
  • docsMap 自定义的 tooltip 的集合
  • getWidgets 接收表单自定义组件的名称，返回表单自定义组件，详情看这里
  • defaultExtraData 默认的 extraData, 详情看这里
  • header 固定渲染在表单头部的组件
  • footer 固定渲染在表单尾部的组件
  • debounceSearch 表单项组件的 onSearch 回调是否需要防抖
  • onDerivedValuesChange 当表单项配置了 valueDerived 属性，且当此表单项的值变化时，触发此回调函数

FormRenderer 的一些默认行为

更新

  • 如果 jsonConfig 的值更新，那么整个表单都会根据新的 jsonConfig 进行渲染，表单的值，内部的各种状态都会重置，也包括表单已经收集到的所有表单数据。
  • 传入 FormRenderer 组件的 defaultExtraData 的值发生改变时，表单内部的 extraData 也会随之更新。

preserve

内置 preserve 固定为 false，即字段被删除时，不保留字段值。

onValuesChange

onValuesChange 回调的第一个参数为 changeValues ，它只包含由用户交互直接引起的数据变更，表单联动的导致的数据变更不包含在内。

ref

通过 ref 可以拿到 FormRenderer 内部的 ant-design form 实例。

form

如果传入了 form 实例，则 FormRenderer 内部不会再创建新的 form 实例，数据都将收集在传入的 form 中，也就无需再通过 ref 去访问表单数据了。注意：传入的 form 实例必须是在 Form.useForm() 中创建的，不要使用类组件中通过 ref 创建的实例。