From 5694d72e5f9298f00656543e09d7fa5cef80472e Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 25 May 2018 11:27:54 +0800 Subject: [PATCH] fix: add form wrappedComponentRef feature --- components/_util/antRefDirective.js | 5 ++++- components/form/demo/advanced-search.vue | 8 +++++++- components/form/index.en-US.md | 10 +++++++--- components/form/index.zh-CN.md | 10 +++++++--- components/vc-form/src/createBaseForm.jsx | 6 ++++++ 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/components/_util/antRefDirective.js b/components/_util/antRefDirective.js index c7d0afde4..e2120aeea 100644 --- a/components/_util/antRefDirective.js +++ b/components/_util/antRefDirective.js @@ -4,8 +4,11 @@ export default { bind: function (el, binding, vnode) { binding.value(vnode) }, + update: function (el, binding, vnode) { + binding.value(vnode) + }, unbind: function (el, binding, vnode) { - binding.value() + binding.value(null) }, }) }, diff --git a/components/form/demo/advanced-search.vue b/components/form/demo/advanced-search.vue index 8b4c30d92..1a2be9e5c 100644 --- a/components/form/demo/advanced-search.vue +++ b/components/form/demo/advanced-search.vue @@ -88,10 +88,16 @@ const AdvancedSearchForm = { const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm) export default { + methods: { + saveFormRef (inst) { + this.formRef = inst + console.log('formRef', this.formRef) + }, + }, render () { return ( ) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 90d3cc487..29cc1e9f8 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -30,6 +30,10 @@ const CustomizedForm = {} CustomizedForm = Form.create({})(CustomizedForm); ``` +Maintain an ref for wrapped component instance, use `wrappedComponentRef`. +Example: [demo](#components-form-demo-advanced-search) + + The following `options` are available: | Property | Description | Type | @@ -112,10 +116,10 @@ Note: | Property | Description | Type | Default Value | | -------- | ----------- | ---- | ------------- | | colon | Used with `label`, whether to display `:` after label text. | boolean | true | -| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | | +| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot | | | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | -| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | | -| label | Label text | string\|ReactNode | | +| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | | +| label | Label text | string\|slot | | | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `` | [object](/ant-design/components/grid/#Col) | | | required | Whether provided or not, it will be generated by the validation rule. | boolean | false | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 096bafdd8..0f3e424c3 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -30,6 +30,10 @@ const CustomizedForm = {} CustomizedForm = Form.create({})(CustomizedForm); ``` +如果需要为包装组件实例维护一个ref，可以使用`wrappedComponentRef`。 +参考[示例](#components-form-demo-advanced-search) + + `options` 的配置项如下。 | 参数 | 说明 | 类型 | @@ -111,10 +115,10 @@ CustomizedForm = Form.create({})(CustomizedForm); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true | -| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | | +| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|slot | | | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | -| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | | -| label | label 标签的文本 | string\|ReactNode | | +| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|slot | | +| label | label 标签的文本 | string\|slot | | | labelCol | label 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/ant-design/components/grid-cn/#Col) | | | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | diff --git a/components/vc-form/src/createBaseForm.jsx b/components/vc-form/src/createBaseForm.jsx index 791098cd5..151f5c750 100644 --- a/components/vc-form/src/createBaseForm.jsx +++ b/components/vc-form/src/createBaseForm.jsx @@ -91,6 +91,12 @@ function createBaseForm (option = {}, mixins = []) { mounted () { this.wrappedComponentRef(this.$refs.WrappedComponent) }, + updated () { + this.wrappedComponentRef(this.$refs.WrappedComponent) + }, + destroyed () { + this.wrappedComponentRef(null) + }, methods: { onCollectCommon (name, action, args) { const fieldMeta = this.fieldsStore.getFieldMeta(name)