doc: update useInjectFormItemContext, close #5667
parent
18ce00d239
commit
e907ffd759
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue