在antd中,可以通过使用Form组件和FormItem组件来创建表单,并获取表单字段的更改后的值。
首先,确保已经安装了antd库,并在代码中引入所需的组件:
import { Form, Input, Button } from 'antd';
然后,创建一个表单并添加FormItem组件。FormItem组件包裹着需要获取值的表单字段,可以使用getFieldValue方法来获取字段的值。在onChange事件中,可以通过调用getFieldValue方法来获取字段的更改后的值。
const MyForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Form values:', values);
};
const onFieldChange = () => {
const fieldValue = form.getFieldValue('fieldName');
console.log('Field value:', fieldValue);
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item name="fieldName" label="Field Name">
<Input onChange={onFieldChange} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
在上面的代码中,我们创建了一个表单,并在FormItem中设置了name属性为"fieldName",然后在Input组件中添加了onChange事件,该事件会在字段值更改时触发。在onFieldChange函数中,我们通过调用form.getFieldValue('fieldName')来获取字段的更改后的值,并将其打印到控制台中。
这样,当用户在Input组件中输入内容时,就会触发onChange事件,并获取到字段的更改后的值。
关于antd的更多信息和使用方法,可以参考腾讯云的Ant Design官方文档:https://ant.design/components/form-cn/
领取专属 10元无门槛券
手把手带您无忧上云