title: 组件 ActionRef

组件 ActionRef

由于有部分组件通过 react ref (ref: 引用) 的方式进行 内部组件 actions 的暴露, AMS 利用这样的机制提供了一个 参数 actionRef 该部分提供了 react ref 的组件进行再次暴露处理, 当使用 actionRef 后开发者可以 使用该组件暴露的所有 ref 属性.

留意例子中的 actionRef: true

  1. {
  2.   $$$: 'component',
  3.   registryName: 'antd',
  4.   componentName: 'Form',
  5.   actionRef: true,
  6.   props: {
  7.     key: "Form-c1a56ccb",
  8.     labelCol: {span: 6},
  9.     wrapperCol: {span: 14},
  10.     onFinish: {
  11.       $$$: 'function',
  12.       registryName: 'ams',
  13.       functionName: 'debug',
  14.       args: [
  15.         '$$$0'
  16.       ]
  17.     }
  18.   },
  19.   children: [
  20.     ...
  21.   ]
  22. }

当标记了 actionRef: true 后, 开发者可以使用如下 actions:

名称 说明 类型
getFieldValue 获取对应字段名的值 (name: NamePath) => any
getFieldsValue 获取一组字段名对应的值，会按照对应结构返回 (nameList?: NamePath[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any
getFieldError 获取对应字段名的错误信息 (name: NamePath) => string[]
getFieldsError 获取一组字段名对应的错误信息，返回为数组形式 (nameList?: NamePath[]) => FieldError[]
isFieldTouched 检查对应字段是否被用户操作过 (name: NamePath) => boolean
isFieldsTouched 检查一组字段是否被用户操作过，allTouched 为 true 时检查是否所有字段都被操作过 (nameList?: NamePath[], allTouched?: boolean) => boolean
isFieldValidating 检查一组字段是否正在校验 (name: NamePath) => boolean
resetFields 重置一组字段到 initialValues (fields?: NamePath[]) => void
scrollToField 滚动到对应字段位置 (name: NamePath, options: [ScrollOptions]) => void
setFields 设置一组字段状态 (fields: FieldData[]) => void
setFieldsValue 设置表单的值 (values) => void
submit 提交表单，与点击 submit 按钮效果相同 () => void
validateFields 触发表单验证 (nameList?: NamePath[]) => Promise

ActionRef 调用

沿用上面 Form 的例子, 当我们需要提交表单时, 我们可以通过下面方式对 antd Form key 为 Form-c1a56ccb 为进行调用:

  1. {
  2.   $$$: 'component',
  3.   registryName: 'antd',
  4.   componentName: 'Button',
  5.   props: {
  6.     onClick: {
  7.       $$$: 'function',
  8.       registryName: 'ams',
  9.       functionName: 'triggerAction',
  10.       args: ['Form-c1a56ccb', 'submit'],
  11.     }
  12.   }
  13. }

注: triggerAction 将在后续章节详细说明

常见需设置 actionRef 组件

  • antd Form
  • ams ProTable