Ant Design 的表单组件提供了两个属性:setFieldsValue 和initialValues。这两个属性的作用都是为表单赋初值,但存在一些区别。
setFieldsValue 是一个方法,使用其可以设置表单某个字段的值。它适用于需要动态改变表单中某个字段值的场景。
initialValues 是一个组件属性,用于在表单初次渲染时为表单赋初值。它适用于表单初始值不依赖于用户输入值的场景。
示例代码:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const FormDemo = () => {
const [form] = Form.useForm();
const [initialValues, setInitialValues] = useState({ name: '张三', age: 18 });
const handleSetFieldsValue = () => {
form.setFieldsValue({ age: 20 });
};
return (
);
};
export default FormDemo;
在上述示例代码中,我们通过在组件中定义 initialValues
来为表单初次渲染时指定默认值。同时,我们还定义了 handleSetFieldsValue
方法用于动态改变表单中 age
字段的值。在渲染表单时,我们使用 form={form}
属性将表单组件与 form
表单实例关联起来,从而使 setFieldsValue
方法能够生效。