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>
  );
}
相关文章
|
小程序
小程序wx.switchTab的跳转传参问题
小程序wx.switchTab的跳转传参问题
432 0
|
前端开发 Java 数据库连接
Spring Boot 3 整合 Mybatis-Plus 动态数据源实现多数据源切换
Spring Boot 3 整合 Mybatis-Plus 动态数据源实现多数据源切换
|
小程序
小程序-uniapp:实现锚点连接/锚点跳转
小程序-uniapp:实现锚点连接/锚点跳转
1175 0
|
JavaScript Python 内存技术
error C:\Users\Acer\Downloads\Desktop\hrsaas-84\node_modules\deasync: 莫名其妙报错一堆python问题
error C:\Users\Acer\Downloads\Desktop\hrsaas-84\node_modules\deasync: 莫名其妙报错一堆python问题
376 0
|
前端开发
react使用antd中的Checkbox实现多选
在React项目中,通过Ant Design的Checkbox组件实现多选。引入Checkbox,使用Checkbox.Group来管理Checkbox,设置`value`属性绑定选中项数组,通过`onChange`更新数组。维护一个全选状态,根据选中项数量与总数决定全选按钮状态。全选按钮的`onChange`事件用于控制所有Checkbox的选中状态。
600 1
react使用antd中的Checkbox实现多选
|
11月前
|
安全
List并发线程安全问题
【10月更文挑战第21天】`List` 并发线程安全问题是多线程编程中一个非常重要的问题,需要我们认真对待和处理。只有通过不断地学习和实践,我们才能更好地掌握多线程编程的技巧和方法,提高程序的性能和稳定性。
589 59
|
人工智能 小程序 前端开发
Ant Design Mini 支持微信小程序啦!
Ant Design Mini 支持微信小程序啦!
870 0
Ant Design Mini 支持微信小程序啦!
|
12月前
|
存储 开发工具 数据安全/隐私保护
git报错The project you were looking for could not be found 解决方式
git报错The project you were looking for could not be found 解决方式
2983 1
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
3505 1
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!