将表单数据还原为initialValues
可以通过以下步骤实现:
initialValues
属性,并将其设置为表单的初始值。initialValues
是一个对象,包含了表单各个字段的初始值。resetFields
、resetForm
等。initialValues
中定义的初始值。以下是一个示例代码,展示了如何使用Ant Design的Form组件将表单数据还原为initialValues
:
import { Form, Input, Button } from 'antd';
const initialValues = {
name: 'John Doe',
email: 'johndoe@example.com',
};
const MyForm = () => {
const [form] = Form.useForm();
const handleReset = () => {
form.resetFields(); // 重置表单数据为initialValues
};
const handleSubmit = (values) => {
console.log(values);
};
return (
<Form form={form} initialValues={initialValues} onFinish={handleSubmit}>
<Form.Item name="name" label="Name">
<Input />
</Form.Item>
<Form.Item name="email" label="Email">
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button onClick={handleReset}>Reset</Button>
</Form.Item>
</Form>
);
};
export default MyForm;
在上述示例中,initialValues
对象定义了name
和email
字段的初始值。通过调用form.resetFields()
方法,可以将表单数据还原为initialValues
中定义的初始值。在点击"Reset"按钮时,会触发handleReset
函数,从而重置表单数据。
请注意,以上示例中使用的是Ant Design的Form组件,其他表单库的使用方法可能会有所不同。你可以根据所使用的具体表单库的文档来了解如何将表单数据还原为初始值。
领取专属 10元无门槛券
手把手带您无忧上云