ant design 的form组件的getFieldInstance使用案例
时间: 2024-02-24 12:58:14 浏览: 21
getFieldInstance 方法是 ant design Form 组件的一个方法,用于获取指定表单项的实例。该方法的使用案例如下:
假设我们有一个包含多个表单项的表单,其中有一个表单项的 name 属性为 "username",我们需要获取该表单项的实例,可以使用 getFieldInstance 方法来实现:
```javascript
import React from 'react';
import { Form, Input } from 'antd';
const DemoForm = () => {
const [form] = Form.useForm();
const handleGetFieldInstance = () => {
const usernameFieldInstance = form.getFieldInstance('username');
console.log(usernameFieldInstance);
};
return (
<Form form={form}>
<Form.Item name="username" label="Username">
<Input />
</Form.Item>
<Form.Item name="password" label="Password">
<Input.Password />
</Form.Item>
<Form.Item>
<button onClick={handleGetFieldInstance}>获取 username 表单项实例</button>
</Form.Item>
</Form>
);
};
export default DemoForm;
```
在上面的例子中,我们定义了一个 DemoForm 组件,其中包含两个表单项,分别是 username 和 password。当我们点击按钮时,会调用 handleGetFieldInstance 方法来获取 username 表单项的实例,并将该实例输出到控制台中。这里需要注意的是,getFieldInstance 方法需要传入表单项的 name 属性值作为参数。