ant-design是一套基于React开发的UI组件库,而useForm是ant-design提供的一个表单处理的Hook函数。使用ant-design useForm查询字段的值,可以按照以下步骤进行:
import { useForm } from 'antd';
import { Input, Button } from 'antd';
const { getFieldDecorator } = useForm();
const initialValues = {
username: '',
password: '',
};
const rules = {
username: [
{
required: true,
message: '请输入用户名',
},
],
password: [
{
required: true,
message: '请输入密码',
},
],
};
<Form>
<Form.Item label="用户名">
{getFieldDecorator('username', {
rules: rules.username,
initialValue: initialValues.username,
})(<Input />)}
</Form.Item>
<Form.Item label="密码">
{getFieldDecorator('password', {
rules: rules.password,
initialValue: initialValues.password,
})(<Input.Password />)}
</Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form>
const handleSubmit = e => {
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
const username = form.getFieldValue('username');
const password = form.getFieldValue('password');
// 对获取到的字段值进行后续处理
}
});
};
通过以上步骤,就可以使用ant-design useForm查询字段的值了。在实际应用中,可以根据具体需求进行进一步的处理和操作。
关于ant-design useForm的更多详细信息和使用方法,可以参考腾讯云官方文档中的相关介绍:ant-design useForm
领取专属 10元无门槛券
手把手带您无忧上云