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>
  );
}
相关文章
antd-procomponent中编辑表格动态数据设置的使用
antd-procomponent中编辑表格动态数据设置的使用
875 0
Vue3炫酷可旋转的3D地球
Vue3炫酷可旋转的3D地球
962 0
深入掌握ant-design的form异步校验(一)
本文适合对ant-design的表单校验感兴趣的小伙伴阅读~
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
5187 10
|
3月前
|
网络协议 前端开发 JavaScript
HTTP/2 特点解析,从 HTTP/1.1 的痛点到新一代协议的进化
HTTP/2 解决 HTTP/1.1 队头阻塞、低效传输等痛点,通过多路复用、二进制帧、头部压缩等技术大幅提升加载速度,支持服务器推送与流优先级,优化用户体验。虽仍受制于 TCP 丢包问题,但已是当前主流高性能协议,为迈向 HTTP/3 奠定基础。
670 159
|
前端开发 Java 数据库
微服务——SpringBoot使用归纳——Spring Boot集成Thymeleaf模板引擎——Thymeleaf 介绍
本课介绍Spring Boot集成Thymeleaf模板引擎。Thymeleaf是一款现代服务器端Java模板引擎,支持Web和独立环境,可实现自然模板开发,便于团队协作。与传统JSP不同,Thymeleaf模板可以直接在浏览器中打开,方便前端人员查看静态原型。通过在HTML标签中添加扩展属性(如`th:text`),Thymeleaf能够在服务运行时动态替换内容,展示数据库中的数据,同时兼容静态页面展示,为开发带来灵活性和便利性。
506 0
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
2269 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
前端开发
antd_使用Input封装实现Form校验效果(最终版)
本文介绍了在Ant Design (antd)框架中如何封装Input组件以实现表单校验效果,并提供了封装代码示例以及如何在提交时进行校验。
587 4
antd_使用Input封装实现Form校验效果(最终版)
|
资源调度 前端开发 JavaScript
React 测试库 React Testing Library
【10月更文挑战第22天】本文介绍了 React Testing Library 的基本概念和使用方法,包括安装、基本用法、常见问题及解决方法。通过代码案例详细解释了如何测试 React 组件,帮助开发者提高应用质量和稳定性。
522 1
|
前端开发 JavaScript
探讨JavaScript实现类似弹幕的跑马灯效果
探讨JavaScript实现类似弹幕的跑马灯效果
1283 1

热门文章

最新文章