ant-design 设置Form.Item中的input框的值的方法

简介: ant-design 设置Form.Item中的input框的值的方法

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>
  );
}
相关文章
|
19天前
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
18 1
|
JavaScript 数据格式
VUE element-ui下拉菜单el-select获取label值或value的值
VUE element-ui下拉菜单el-select获取label值或value的值
1528 0
VUE element-ui下拉菜单el-select获取label值或value的值
|
19天前
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
41 0
|
4月前
|
缓存 JavaScript 前端开发
通过id给input框和div赋值,修改属性值。
通过id给input框和div赋值,修改属性值。
44 0
通过id给input框和div赋值,修改属性值。
|
9月前
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
56 0
|
5月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
41 0
|
6月前
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
150 0
|
7月前
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
224 0
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
9月前
|
前端开发
控制ant design中form的必填项判断
控制ant design中form的必填项判断
49 0