antd的Form表单如何取到表单里的数据以及如何设置默认值

2023-05-16

获取表单数据

第一步创建ref实例

//在render外面,类里面就可以
formRef = React.createRef()

第二步给form表单赋值

 <Form  style={{ width: 600, marginLeft: 30, marginTop: 20 }} ref={this.formRef}>
 </Form>

第三步给每个Form.Item添加name属性

<Form.Item
    name="username"
    label="姓名"
    rules={[
        {
            required: true,
            message: 'Username is required!',
        },
    ]}
>
    <Input />
</Form.Item>

第四步取值

//这个是用来取到form表单里所有item的值
this.formRef.current.getFieldsValue()
//这个是用来取到指定item的值,username是属性name的值
this.formRef.current.getFieldValue("username")

设置默认值

// form是订阅模态框传过来的值
    showModal = (msg, { status, form }) => {
        
        this.setState({
            visible: true,
            // confirmLoading: false,
            status,
            // form:form.toJS()
        }, () => {
            const getForm = form.toJS()
            // 如果是常量就可以 ,变量就不行,所以用一个const常量接收一下
            // 冒号前是Item的name属性
            this.formRef.current.setFieldsValue({
                username:getForm.name,
                place:getForm.jzPlace,
                // datePicker:getForm.birthTime,
                email:getForm.email,
                perAdvantage:getForm.perAdvantage,
                qwPost:getForm.qwPosition,
                qwPlace:getForm.qwPlace,
                qwSalary:getForm.qwSalary,
                qwType:getForm.qwType,
                workExperience:getForm.workExperience,
                school:getForm.school,
                specialize:getForm.specialize,
                degree:getForm.degree,
                // 这里还有个时间段没写
                campusSituation:getForm.campusSituation,
                skills:getForm.skills
            })
           
            
            
        })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd的Form表单如何取到表单里的数据以及如何设置默认值 的相关文章

随机推荐

  • FreeRTOS 学习笔记(自用)

    前言 xff1a 本文章用于记录学习FreeRTOS xff08 韦老师 xff09 期间的笔记以及一些个人理解 xff08 带完善 xff09 一 学习内容 xff1a 1 裸机及操作系统 2 FreeRTOS功能及其实现原理 3 线程通
  • 《单片机串口》—将传感器获取的数值在上位机显示

    这里写目录标题 1 单片机通过串口发送单个字符2 单片机通过串口发送字符串3 单片机将传感器获取到的数字值发送到上位机 之前在学蓝牙通信的时候如何将单片机获取到的传感器的数值发送到上位机遇到了不少的问题 由于数据的发送一种是字符格式一种是
  • 三天让车立起来!STM32平衡车入门PID —— 第三天(PID调参)

    说明 xff1a 本文章适用于STM32初学者 xff0c 想完成一个好玩且有深度的项目但不知道从何下手的同学 PID调参是平衡车的精髓所在 xff0c 参数整定的好坏直接影响到平衡车的平衡效果 有的车平衡时来回晃而参数选的好的车就能稳稳地
  • PCB笔记-原理图

    1 学习路线 画PCB追求的是效率 xff01 xff01 xff01 2 元件库的创建 2 1 元件符号 元件符号是元件在原理图上的表现形式 xff0c 主要由元件边框 xff0c 管脚 xff08 包括管脚序号和管脚名称 xff09 x
  • FreeRTOS任务调度启动流程

    FreeRTOS任务调度启动流程 PrefacePreviewAttentionFreeRTos目录结构解释 FreeRTos任务调度一 vTaskStartScheduler函数中需要注意的细节二 xPortStartScheduler函
  • 正点原子视频学习笔记—Verilog下按键消抖, 实现LED灯的点亮和熄灭

    正点原子视频学习笔记 Verilog下按键消抖 实现LED灯的点亮和熄灭 在学习FPGA的基础阶段会有按键控制LED灯亮灭的实验 xff0c 其中避免不了要对按键进行消抖处理 xff0c 以及LED的控制模块 xff0c 和顶层例化模块 本
  • 蚂蚁4面和体检都过了,最后却因为背调挂了导致无业,网友:没养个备胎?

    因为背调而与offer失之交臂的求职者并不是个例 xff0c 最近看到一位程序员发帖称 xff0c 自己蚂蚁4面和体检都过了 xff0c 最后却因为合并简历而挂了 着实令人可惜 原贴如下 xff1a 楼主在评论区解释称 xff0c 自己已经
  • Linux C 下的socket网络编程

    1 socket简介 在我们常用的网络通信中 xff0c socket是最常用的一种 xff0c socket编程也称套接字编程 xff0c 下面我们将对socket编程进行相关讲解 xff0c 其中包括服务器与客户端通信讲解 xff0c
  • 关于stm32结构体

    刚刚看到stm32结构体 xff0c 这个部分还是很重要的 xff0c 做一个小结总结一下 正常标注结构体形式 struct GPIO 成员列表 这样就定义了一个结构体 xff0c 但是当需要定义变量时就需要 struct GPIO GPI
  • stm32f103c8t6 + 串口打印 + dh1

    1 首先新建一个c8t6的工程 如果使用本程序的话 xff0c 可直接运行 xff0c 亲测有效 xff0c 如果想移植功能的同学继续往下看 程序里面的注释也写的很清楚 2 串口打印 首先拿到usart c和usart h文件放置自己的工程
  • 【VIBE: Video Inference for Human Body Pose and Shape Estimation】论文阅读

    论文连接 xff1a https arxiv org pdf 1912 05656 pdf 代码连接 xff1a https github com mkocabas VIBE Video Inference for Human Body P
  • 操作系统——处理机调度

    2 2 处理机调度 2 2 1 调度的概念 调度的基本概念 xff1a 处理机调度是对处理机进行分配 xff0c 从就绪队列中按照一定的算法选择一个进程并将处理机分配给它运行 xff0c 以实现进程并发执行 调度的层次 xff1a 1 xf
  • ROS学习指南(五)

    IMU在ROS里的使用方法 一 IMU消息包在ROS里的数据格式 IMU是安装在机器人内部的传感器模块 xff0c 用来测量当前机器人的位姿 常用的六轴IMU可以解算出机器人xyz三个方向的角速度和角加速度 消息包定义如下 xff0c 其中
  • vins-fusion环境配置,解决opencv3->4的cv::bridge问题

    本文主要介绍如何搭建vins fusion的运行环境 xff0c 以及解决vins fusion编译运行时遇到的环境冲突问题 xff0c 并在此基础上实现例程的运行 本文是在已经安装好 ROS 的基础上 xff0c 在 Ubuntu20 0
  • 解决ROS编译过程中的简单的环境问题

    一 rosmake ERROR No arguments could be parsed into valid package or stack names 该错误是因为找不到工作目录路径 xff0c 设置为当前绝对路径名即可 xff0c
  • 《headfirst设计模式》读书笔记9-迭代器和组合模式

    目录 1 封装遍历2 定义迭代器模式2 1 部分源码2 1 1 MenuItem h2 1 2 Menu h2 1 3 Iterator h2 1 4 ArrayIterator h2 1 5 ArrayIterator cpp2 1 6
  • 【论文笔记】Stereo Camera Localization in 3D LiDAR Maps

    论文笔记 Stereo Camera Localization in 3D LiDAR Maps 随着 3D 光探测和测距 LiDAR 传感器的出现 xff0c 同步定位和映射 SLAM 技术蓬勃发展 xff0c 因此准确的 3D 地图很容
  • C盘有哪些软件可以删除呀

    今天下载QQ群里面的文件 xff0c 电脑居然弹窗 磁盘空间不足 xff0c 我心头一痛 我不是上个月才清过的吗 xff1f xff01 好吧 xff0c 那再来一次 这是我删了一通之后的C盘状态 xff1a 是不是还是很满 xff1f 没
  • Kubernetes-集群结合普罗米修斯、监控nginx、hpa动态伸缩

    目录 xff1a Prometheus简介一 k8s集群部署Prometheus二 Prometheus监控应用nginx三 prometheus实现k8s集群的hpa动态伸缩 Prometheus简介 Prometheus 是由 Soun
  • antd的Form表单如何取到表单里的数据以及如何设置默认值

    获取表单数据 第一步创建ref实例 span class token comment 在render外面 xff0c 类里面就可以 span formRef span class token operator 61 span React s