当前位置: 首页 > news >正文

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>);
}

http://www.lryc.cn/news/155268.html

相关文章:

  • CS420 课程笔记 P6 - 游戏逆向中的虚拟内存
  • 公信力不是儿戏:政府与非营利组织如何利用爱校对提升信息质量
  • Linux内核源码分析 (B.1)内核内存布局和堆管理
  • Python---函数
  • Myvatis关联关系映射与表对象之间的关系
  • 算法通关村第十四关:黄金挑战-数据流的中位数
  • 【2023集创赛】国家集创中心杯三等奖:不对称轻失配运算放大器
  • 手写Mybatis:第18章-一级缓存
  • 哈夫曼编码实现文件的压缩和解压
  • 解决六大痛点促进企业更好使用生成式AI,亚马逊云科技顾凡采访分享可用方案
  • Qt 定时器放在线程中执行,支持随时开始和停止定时器。
  • java 过滤器 接口(API)验证入参,验签(sign) Demo
  • 独家!微信正在灰测一款全新消金产品
  • 阿秀C++笔记-学习记录
  • 前端入门到入土?
  • 架构设计基础设施保障IaaS之网络
  • zabbix安装部署
  • 零碎的C++
  • 模糊测试面面观 | 模糊测试是如何发现异常情况的?
  • C#备份数据库文件
  • 行军遇到各种复杂地形怎么处理?
  • Python Number(数字).............................................
  • 设置 Hue Server 与 Hue Web 界面之间的会话超时时间
  • openGauss学习笔记-57 openGauss 高级特性-并行查询
  • 软考(1)-面向对象的概念
  • 深度学习推荐系统(四)WideDeep模型及其在Criteo数据集上的应用
  • 第十二章 YOLO的部署实战篇(中篇)
  • 面试题查漏补缺 i++和 ++ i哪个效率更高
  • Docker的数据管理(持久化存储)
  • 定时脚本自动自动将文件push到git