antd--Form组件的属性 form
form属性：经 Form.useForm()
// 当一个组件有多个表单
function Role () {
// 创建相应的表单实例
const [addForm] = Form.useForm()
const [editForm] = Form.useForm()
........一些逻辑代码
return (
<>
<Form form={editForm} >
.....
</Form>
<Form form={addForm} >
.....
</Form>
</>
)
}form 实例的方法
1. getFieldsValue: 用于获取表单中所有字段的值。
- 用于获取表单中所有字段的值。这个方法返回一个对象，其中包含表单中每个字段的当前值。
- 它的使用场景通常是在需要获取表单中所有字段值的情况下，比如表单提交前的数据验证或者数据处理。
- eg: 编辑的保存确定按钮，调编辑的接口传递参数发送请求。此时可以通过getFieldsValue() 方法来获取 你当前要编辑的内容的值 赋值给编辑的接口你要的字段。
- 表单提交前数据获取： 在用户提交表单之前，可能需要获取表单中所有字段的值进行进一步处理，例如进行数据验证、格式化等操作。此时可以使用
getFieldsValue方法获取表单数据。 - 表单数据展示或预览： 在某些情况下，你可能需要展示表单中已填写的数据或者进行预览。使用
getFieldsValue方法可以轻松地获取表单数据，并在页面上展示给用户。
function Role (){
const [form] = Form.useForm();
const editSave = () =>{
const {role_name, role_id} = editForm.getFiledsValue()
// 发请求
}
return (
.....
<Form form={form}>
<Form.Item
label = "角色编号"
name = "role_id"
>
<Input disabled ><Input/>
</Form.Item>
<Form.Item
label = "角色名称"
name = "role_name"
>
<Input disabled ><Input/>
</Form.Item>
<Form.Item
label = "权限管理"
name = "function_list"
>
<Tree
....
/>
</Form.Item>
<Form.Item >
<Space>
<Button>取消</Button>
<Button onClick= {editSave}>保存</Button>
<Space/>
</Form.Item>
</Form>
)
}2. getFieldValue: 用于获取表单中指定字段的值。
// 它的使用场景通常是在需要获取单个字段值的情况下，
// 比如需要对某个字段的值进行特定的操作或验证。
import React from 'react';
import { Form, Input, Button } from 'antd';
// 假设有一个包含用户名和邮箱的注册表单组件
const RegisterForm = () => {
const [form] = Form.useForm();
// 表单提交时的处理函数
const handleSubmit = () => {
// 获取邮箱字段的值
const email = form.getFieldValue('email');
// 在这里可以对获取到的字段值进行特定的操作，比如数据验证等
console.log('邮箱字段值:', email);
// 这里模拟一个简单的数据验证，假设邮箱格式需要符合规范
if (!email || !isValidEmail(email)) {
alert('请输入有效的邮箱地址');
return;
}
// 如果通过验证，则可以进行后续的操作，比如发送注册请求等
// 这里可以添加注册逻辑
// register(email, password);
};
// 简单的邮箱格式验证函数
const isValidEmail = (email) => {
// 此处省略邮箱格式验证逻辑，可以使用正则表达式等方法进行验证
return true;
};
return (
<Form form={form} onFinish={handleSubmit}>
<Form.Item name="email" label="邮箱">
<Input />
</Form.Item>
<Form.Item name="password" label="密码">
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
注册
</Button>
</Form.Item>
</Form>
);
};
export default RegisterForm;
/*
当用户点击注册按钮时，handleSubmit 函数被调用，
通过调用 form.getFieldValue('email') 获取邮箱字段的值，
然后进行特定的操作，比如验证邮箱格式。如果验证通过，
可以进行后续的操作，比如发送注册请求等。
*/3. resetFileds: 用于重置表单中的所有字段值为初始值。
- 用于将表单字段重置为初始状态，清除用户填写的数据以及可能存在的验证错误信息。
- 它的使用场景通常是在需要重置表单时， 比如用户取消编辑或者需要重新填写表单时。(新增按钮、编辑的取消按钮)
- 表单提交成功后的重置： 在用户成功提交表单后，你可能希望清除表单中的数据，以便用户可以填写新的数据提交。这时就可以在表单提交成功的回调函数中调用
resetFields方法。 - 取消表单编辑操作： 如果用户开始填写表单但是后来决定取消操作，你可以提供一个“取消”按钮，点击该按钮时调用
resetFields方法，将表单恢复到初始状态。 - 动态表单数据加载后的重置： 如果你的表单数据是动态加载的，当数据重新加载时，你可能需要重置表单以确保填写的数据与最新加载的数据一致。
resetFields方法在需要清空表单数据或者重置表单状态时非常有用。
import React from 'react';
import { Form, Input, Button } from 'antd';
// 假设有一个包含用户名和邮箱的编辑表单组件
const EditForm = ({ initialValue }) => {
const [form] = Form.useForm();
// 初始化表单字段值为传入的初始值
form.setFieldsValue(initialValue);
// 表单提交时的处理函数
const handleSubmit = () => {
// 获取表单中所有字段的值
const fieldsValue = form.getFieldsValue();
// 在这里可以对获取到的字段值进行处理，比如数据验证、发送请求等
console.log('表单字段值:', fieldsValue);
// 这里可以添加保存编辑内容的逻辑
// saveChanges(fieldsValue);
};
// 取消编辑时的处理函数
const handleCancel = () => {
// 重置表单字段值为初始值
form.resetFields();
};
return (
<Form form={form} onFinish={handleSubmit}>
<Form.Item name="username" label="用户名">
<Input />
</Form.Item>
<Form.Item name="email" label="邮箱">
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
保存
</Button>
<Button type="default" onClick={handleCancel}>
取消
</Button>
</Form.Item>
</Form>
);
};
export default EditForm;
/*
当用户点击取消按钮时，handleCancel 函数被调用，
通过调用 form.resetFields() 方法重置表单中的所有字段值为初始值，
这样用户就可以重新填写表单内容或者取消编辑操作。
*/4. setFieldsValue:用于动态设置表单字段的值。
- 用于动态设置表单字段的值。该方法接受一个对象作为参数，对象的键是字段名，值是要设置的值。
- 表单数据编辑： 当用户需要编辑已有的数据时，可以使用
setFieldsValue方法将数据填充到表单中，使用户可以在表单中看到当前数据，并进行修改。 - 表单联动： 在一些需要联动操作的场景中，当用户对某个字段进行操作时，可能会影响到其他字段的值。可以在表单的某些事件（如表单字段值变化）中使用
setFieldsValue方法更新其他相关字段的值，以实现联动效果。 - 表单数据回显： 当从后端获取到某个对象的数据，并需要将这些数据回显到表单中时，可以使用
setFieldsValue方法将数据填充到表单字段中，以供用户查看或编辑。 - 动态表单数据加载后的填充： 如果表单数据是动态加载的，当数据加载完成后，可以使用
setFieldsValue方法将数据填充到表单字段中，以便用户进行操作。
import React, { useState } from 'react';
import { Form, Input, Button, Select } from 'antd';
const DemoForm = () => {
const [form] = Form.useForm();
const [selectedCountry, setSelectedCountry] = useState('');
const [cities, setCities] = useState([]);
// 应用场景 1: 表单联动 - 根据选择的国家动态更新城市列表
const handleCountryChange = (value) => {
// 模拟根据国家获取城市列表的函数
const citiesFromBackend = fetchCitiesFromBackend(value);
// 更新城市列表
setCities(citiesFromBackend);
// 清空城市字段的值
form.setFieldsValue({ city: '' });
// 更新当前选择的国家
setSelectedCountry(value);
};
// 应用场景 2: 表单数据回显 - 编辑页面加载时从后端获取数据并填充到表单中
const fetchUserDataFromBackend = () => {
// 模拟从后端获取用户数据的函数
return { name: 'John Doe', email: 'john@example.com' };
};
// 编辑页面加载时执行数据回显
useEffect(() => {
const userDataFromBackend = fetchUserDataFromBackend();
// 使用 setFieldsValue 方法将数据填充到表单中
form.setFieldsValue(userDataFromBackend);
}, []);
// 应用场景 3: 表单数据编辑 - 用户点击编辑按钮后，从后端获取数据填充到表单中
const handleEdit = () => {
const userDataFromBackend = fetchUserDataFromBackend();
// 使用 setFieldsValue 方法将数据填充到表单中
form.setFieldsValue(userDataFromBackend);
};
// 表单提交
const handleSubmit = (values) => {
console.log('Submitted values:', values);
// 在实际应用中，这里可以进行表单提交操作，如发送请求给后端保存数据
};
return (
<Form form={form} onFinish={handleSubmit}>
{/* 应用场景 1: 表单联动 */}
<Form.Item label="Country" name="country">
<Select onChange={handleCountryChange}>
<Select.Option value="usa">USA</Select.Option>
<Select.Option value="canada">Canada</Select.Option>
</Select>
</Form.Item>
{/* 应用场景 1: 表单联动 */}
<Form.Item label="City" name="city">
<Select>
{cities.map(city => (
<Select.Option key={city} value={city}>{city}</Select.Option>
))}
</Select>
</Form.Item>
{/* 应用场景 2 和 3: 表单数据回显和编辑 */}
<Form.Item label="Name" name="name">
<Input />
</Form.Item>
<Form.Item label="Email" name="email">
<Input />
</Form.Item>
<Form.Item>
{/* 应用场景 3: 表单数据编辑 */}
<Button type="primary" onClick={handleEdit}>
Edit
</Button>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default DemoForm;表单联动： 当用户选择不同的国家时，城市字段的选项会动态更新。通过监听国家字段的变化事件，在事件处理函数中使用
setFieldsValue方法更新城市字段的选项，并清空城市字段的值。表单数据回显： 编辑页面加载时，从后端获取数据并填充到表单中，以便用户进行查看或编辑。在
useEffect钩子中执行数据回显操作。表单数据编辑： 当用户点击编辑按钮时，从后端获取数据填充到表单中，以便用户进行修改。在编辑按钮的点击事件处理函数中执行数据填充操作。
5. validateFields：用于校验表单字段的值
validateFields([fields], [options], [callback])
fields（可选）:
- 类型：Array<string>
- 描述：一个包含需要验证的字段名称的数组。如果省略此参数，默认验证所有表单字段。
options（可选）:
- 类型：Object
- 描述：验证选项对象，包含以下可选属性：1.
force: 布尔值，表示即使字段之前已经被验证过且存在错误，也应再次尝试验证（默认为false）。2.recursive: 布尔值，表示是否递归验证嵌套的Form组件中的字段（默认为true，适用于Form.Item中有嵌套Form的场景）。
callback(err, values)（可选）:
- 类型：Function
- 描述：验证完成后的回调函数，有两个参数：1.
err: 如果存在验证失败的字段，err为一个对象，其中键是出错字段的名字，值是错误信息数组；如果没有错误，则err为null。 2.values: 一个对象，键是字段名，值是验证通过后的字段值。
// ------------- 验证所有字段 ----------------------
formInstance.validateFields().then((values) => {
console.log('所有字段验证通过，值为：', values);
}).catch((errInfo) => {
console.error('表单验证失败：', errInfo);
});
// 或者使用async/await语法
try {
const values = await formInstance.validateFields();
console.log('所有字段验证通过，值为：', values);
} catch (errInfo) {
console.error('表单验证失败：', errInfo);
}//---------------验证指定字段 ------------------------
formInstance.validateFields(['username', 'password']).then((values) => {
console.log('指定字段（username和password）验证通过，值为：', values);
}).catch((errInfo) => {
console.error('指定字段验证失败：', errInfo);
});
// 或者
try {
const values = await formInstance.validateFields(['email', 'phone']);
console.log('指定字段（email和phone）验证通过，值为：', values);
} catch (errInfo) {
console.error('指定字段验证失败：', errInfo);
}// ----------配置选项 -------------
formInstance.validateFields(
['username', 'password'],
{ force: true, recursive: false }
).then((values) => {
// ...
});
// 其中：
// - force: 布尔值，表示即使字段之前验证失败也会再次尝试验证（默认为false）
// - recursive: 布尔值，表示是否递归验证嵌套的Form（默认为true，
// 适用于Form.Item中有嵌套的Form场景）formInstance.validateFields().then((values) => {
// 这里的values是一个对象，包含经过验证的所有字段的值
// 如果所有字段都验证通过，则err参数为空，values包含有效的表单数据
if (!err) {
// 表单验证成功，values可以安全地用于提交到服务器或其他后续操作
console.log('表单验证成功，准备提交:', values);
// 这里可以写提交表单数据的逻辑
} else {
// err对象包含了验证失败的字段信息，可以根据err进行错误提示或处理
}
}).catch((errorInfo) => {
// 如果在验证过程中发生异常，catch块会捕获这些异常
console.error('表单验证期间发生错误:', errorInfo);
});formInstance.validateFields().then(() => {
// 这里的箭头函数没有参数，是因为在验证成功的回调中，
// 我们通常关心的是所有字段验证通过后的操作，而不是具体的验证结果。
// 在验证成功的场景下，你可以在这里执行表单提交操作或者其他后续逻辑。
// 实际上，如果需要获取验证后的所有字段值，应如下所示：
// formInstance.validateFields().then((values) => {
// console.log('表单验证成功，所有字段值:', values);
// // 提交表单数据到服务器或其他后续操作
// });
// 但由于在示例代码中箭头函数没有参数，此处仅表示验证成功后的一种默认操作或空操作。
});在 formInstance.validateFields().then(() => {}) 这种情况下，如果表单验证失败并且没有提供 catch 回调函数，那么验证过程中发生的错误将不会被捕获和处理。当表单验证失败时（无论是在同步还是异步验证过程中），验证错误会导致 Promise 被拒绝，但由于没有 catch 语句来捕获错误，这个错误将会冒泡到全局作用域，最终可能导致程序崩溃或者在浏览器控制台输出错误信息。
为了避免这种情况，应该添加一个 catch 语句来妥善处理验证失败的情况。
formInstance.validateFields().then(() => {
// 验证成功时的处理逻辑
}).catch((errorInfo) => {
// 验证失败时的处理逻辑
console.error('表单验证失败：', errorInfo);
// 在这里可以显示错误提示，或者进行其他错误处理操作
});then(() => {})： 当调用formInstance.validateFields()后，若所有字段都验证通过，Promise 将被 resolve，执行then中的回调函数。箭头函数没有参数，这意味着当验证成功时，不做任何特别的操作，或者执行一个默认操作。catch((errorInfo) => {})： 如果在验证过程中有任何字段验证失败，或者发生了异步验证错误，Promise 将被 reject，执行catch中的回调函数。
import React, { useState } from 'react';
import { Modal, Form, Input, Button } from 'antd';
const MyModalForm = ({ visible, setVisible }) => {
const [form] = Form.useForm();
const handleSubmit = () => {
form.validateFields()
.then((values) => {
console.log('表单验证成功，所有字段值:', values);
// 在这里执行表单提交或其他后续逻辑
// 例如：submitForm(values);
// 这里模拟关闭模态框并清空表单
setVisible(false);
form.resetFields();
})
.catch((errInfo) => {
console.error('表单验证失败:', errInfo);
// 在这里处理验证错误，如显示错误提示
// 假设 errInfo.getFieldsError() 返回包含错误信息的对象数组
const errors = form.getFieldsError();
errors.forEach((fieldError) => {
if (fieldError.errors.length) {
const fieldName = Object.keys(fieldError)[0];
form.getFieldInstance(fieldName)?.focus();
notification.error({
message: '表单验证错误',
description: fieldError[fieldName][0],
});
}
});
});
};
return (
<Modal
title="表单标题"
visible={visible}
onOk={handleSubmit}
onCancel={() => setVisible(false)}
>
<Form form={form}>
<Form.Item
name="username"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="用户名" />
</Form.Item>
{/* 其他表单字段... */}
</Form>
</Modal>
);
};
export default MyModalForm;
6. setFields：用于直接设置表单项的状态。
基本语法：
form.setFields(fields);其中的参数 fields是一个对象数组，用于描述表单项的状态更新信息。
对象里的属性就是上方图片中的 FieldData里的那6个。
每个对象通常包含以下主要属性：
- name:
string类型，表单项的唯一标识符，必须与<Form.Item>中的name属性匹配。- value:
any类型，可选，用于设定表单项的值。- errors:
string[] | Error[]类型，可选，用于设置表单项的错误信息，如果需要清除错误提示，可以将其设置为一个空数组[]。- touched:
boolean类型，可选，表示表单项是否已被用户交互过，如果需要手动触发表单项的校验提示，可以设置为true。- validating:
boolean类型，可选，表示表单项是否正在验证中。
eg:
一：username 字段的值被设置为 'newUsername'，而 email 字段则被赋予了一个错误信息数组，表示邮箱格式不正确。
const fieldsToUpdate = [
{
name: 'username',
value: 'newUsername',
},
{
name: 'email',
errors: ['邮箱格式不正确，请重新输入'],
},
];
form.setFields(fieldsToUpdate);二：
Form一共有5个Form.Item，点击按钮A校验前2个Item，点击按钮B校验5个，比如我第3个Item没填，然后我先点击了按钮B，校验没通过，第3个Item有校验提示，然后我点击按钮A，按钮A只需要校验前2个Item，校验通过了，但是此时第3个Item的校验提示还在，这显然不太对
——在执行部分校验之前，可以先清除或重置特定表单项的错误信息。
const handleA = async () => {
try {
// 在校验之前，重置 field3 的错误信息（假设field3是第三个需要忽略校验的项）
form.setFields([
{ name: 'field3', errors: [] }, // 清除指定字段的错误
// 如果有其他需要重置错误的字段，也可以在这里添加
]);
// 然后只校验前两个表单项
await form.validateFields(['field1', 'field2']);
console.log('校验A&B通过');
// ...其他逻辑
} catch (errorInfo) {
console.log('校验A&B失败', errorInfo);
}
};本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
