ant-design 设置Form.Item中的input中的value值是不知道什么原因是无效的,所以有以下两种方法设置:
1.可以通过 initialValues
属性来为表单设置默认值。具体使用方法如下:
在表单最外层的 Form
组件上加入 initialValues
属性,将需要设置的默认值作为一个对象传入。
示例代码:
<Form initialValues={{ username: 'admin', password: '123456' }}> // 表单控件 </Form>
对于某个表单控件,如果需要设置默认值,可以在该控件上加入 initialValue
属性。
示例代码:
<Form.Item name="username" initialValue="admin"> <Input /> </Form.Item>
2.可以通过setFieldsValue方法设置表单的初始值或更新表单的值。
用法如下:
导入Form组件和useForm钩子:
import { Form, useForm } from 'antd';
使用useForm钩子创建form实例,并声明表单中的字段:
const [form] = useForm();
在需要设置表单值的地方调用setFieldsValue方法:
form.setFieldsValue({ username: 'John', password: '123456', });
其中,setFieldsValue方法的参数是一个对象,包含需要更新的表单字段和对应的值。注意,字段名必须与表单中的name属性对应。
完整示例代码:
import { Form, Input, Button } from 'antd'; import { useForm } from 'antd/lib/form/Form'; function MyForm() { const [form] = useForm(); const handleSetFieldsValue = () => { form.setFieldsValue({ username: 'John', password: '123456', }); }; return ( <Form form={form}> <Form.Item name="username" label="Username"> <Input /> </Form.Item> <Form.Item name="password" label="Password"> <Input.Password /> </Form.Item> <Form.Item> <Button onClick={handleSetFieldsValue}>Set Form Value</Button> </Form.Item> </Form> ); }