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

View File

@ -100,7 +100,7 @@ You can reference [Customized Form Controls](#components-form-demo-customized-fo
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,
@ -122,7 +122,7 @@ The first is to use multiple `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
<script>
@ -131,7 +131,7 @@ The second way is to wrap it with a custom component and call `useFormItemContex
export default {
name: 'custom-name',
setup() {
const formItemContext = Form.useFormItemContext();
const formItemContext = Form.useInjectFormItemContext();
},
};
</script>

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 只能收集一个表单项的数据,如果有多个表单项,会导致收集错乱,例如,
@ -121,7 +121,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
</a-form-item>
```
第二种,使用自定义组件包裹,并在自定义组件中调用 `useFormItemContext`,相当于把多个表单项合并成了一个
第二种,使用自定义组件包裹,并在自定义组件中调用 `useInjectFormItemContext`,相当于把多个表单项合并成了一个
```html
<script>
@ -129,7 +129,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
import { Form } from 'ant-design-vue';
export default {
setup() {
const formItemContext = Form.useFormItemContext();
const formItemContext = Form.useInjectFormItemContext();
},
};
</script>