可以使用 Ant Design Form 组件中的 initialValue 属性来设置表单项的默认值,示例如下:
import { Form, Input } from 'antd';
const MyForm = () => {
const initialValues = {
name: 'Tom',
age: 18,
}
return (
)
}
在上述代码中,我们使用了 Form 组件的 initialValues 属性来设置 name 和 age 表单项的默认值为 'Tom' 和 18。这样,在组件渲染时,表单项的默认值就被设置了。
如果需要动态修改表单项的值,也可以通过设置 Form.Item 组件的 value 属性来实现:
import { Form, Input } from 'antd';
import { useState } from 'react';
const MyForm = () => {
const [name, setName] = useState('Tom');
const onNameChange = (e) => {
setName(e.target.value);
}
return (
)
}
在上述代码中,我们使用了 useState Hook 来动态管理 name 表单项的值。当输入框的值改变时,会触发 onNameChange 回调函数,从而更新 name 的值。由于 Form.Item 的 value 属性与 name 变量绑定,所以表单项的值也会相应地改变。