github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update useInjectFormItemContext, close #5667

pull/5669/head
tangjinzhou 2022-06-06 09:50:33 +08:00
parent 18ce00d239
commit e907ffd759
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/form/index.en-US.md
View File

@ -100,7 +100,7 @@ You can reference [Customized Form Controls](#components-form-demo-customized-fo
But it also has some disadvantages: But it also has some disadvantages:
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` and call the corresponding method. 1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` and call the corresponding method.
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example, 2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example,
@ -122,7 +122,7 @@ The first is to use multiple `a-form-item`:
</a-form-item> </a-form-item>
``` ```
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component, It is equivalent to merging multiple form items into one. The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
```html ```html
<script> <script>
@ -131,7 +131,7 @@ The second way is to wrap it with a custom component and call `useFormItemContex
export default { export default {
name: 'custom-name', name: 'custom-name',
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>

6
components/form/index.zh-CN.md
View File

@ -99,7 +99,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
但它同样会有一些缺点： 但它同样会有一些缺点：
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入，并调用相应的方法。 1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 注入，并调用相应的方法。
2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱，例如， 2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱，例如，
@ -121,7 +121,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
</a-form-item> </a-form-item>
``` ```
第二种，使用自定义组件包裹，并在自定义组件中调用 `useFormItemContext`，相当于把多个表单项合并成了一个 第二种，使用自定义组件包裹，并在自定义组件中调用 `useInjectFormItemContext`，相当于把多个表单项合并成了一个
```html ```html
<script> <script>
@ -129,7 +129,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
export default { export default {
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>