antd中Form.useForm()使用方式

2023-11-10

这里写自定义目录标题

onRow

<Table
	// record:点击后获取的数据对象
  onRow={record => {
    return {
    		 // event获取当前列元素节点,可用 event.target.parentNode获取整行
      onClick: event => {}, // 鼠标左击
      onDoubleClick: event => {}, // 鼠标双击
      onContextMenu: event => {}, // 鼠标右击
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {}, // 鼠标移出行
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // 点击表头行
    };
  }}
/>

表单Form.useForm()

通过 Form.useForm 对表单中数据域进行交互

const [form] = Form.useForm()

经过Form.useForm()创建的form实例中,常用的方法如下

1、form.setFieldsValue()
设置表单的值,更新对应的值

// 只更新相对于的,不用输入全部
form.setFieldsValue({
	name:"yi",
	age:1,
})

2、form.getFieldValue()
获取对应字段名的值

const name = form.getFieldValue("name"); // yi
const age = form.getFieldValue("age"); // 1

3、form.getFieldsValue()
获取一组字段名对应的值,并按照对应结构返回

const value = form.getFieldsValue(); {name:"yi",age:1}

4、form.validateFields()
触发表单验证

form.validateFields().then(value => {
	// 验证通过后进入
	const { name, age } = value;
	console.log(name, age); // dee 18
}).catch(err => {
	// 验证不通过时进入
	console.log(err);
});

5、form.submit()
提交表单,与点击 submit 按钮效果相同,会走 onFinish 方法。

<Button onClick={() => form.submit()}>
  提交
</Button>
// 与下面效果一样
<Button htmlType="submit">
  提交
</Button>

6、form.resetFields()
重置一组字段到 initialValues。

form.resetFields();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd中Form.useForm()使用方式 的相关文章

随机推荐

  • 配置PDB符号文件服务

    配置PDB符号文件服务器的想法 刚入职的小木 前不久刚刚解决了一次crash问题 Windbg分析程序崩溃实践 小木没有松懈 继续进行项目代码和Debug技术的学习 同时也思考了一个问题 产品每隔一段时间就会发布新的版本 当出现Crash问
  • 利用Python实现一组数的最大公约数

    我先用求三个整数的最大公约数为例 首先利用for循环来进行判断这三个整数可以被那些数整除 代码如下 x y z eval input 请输入三个整数 用逗号隔开 ma max x y z ls for i in range 2 ma a x
  • 【MQTT】MQTT协议学习

    文章目录 MQTT协议 简述 特点 MQTT消息的QoS 服务质量 MQTT支持三种QoS等级 协议实现方式 MQTT协议数据包 控制报文 结构 MQTT固定头 MQTT数据包类型 标识位 剩余长度 Remaining Length MQT
  • Sqlserver 监控使用磁盘空间情况

    最近遇到一个小问题 为了保存以往的一些数据 间了大量临时表 导致SQLserver 数据增长过快 不得不想个办法监控磁盘空间使用情况 网上一般有几种办法 一是使用 dm os volume stats函数 缺点是 无法获取非数据库所在的磁盘
  • Service Bus Namespace 和 Access Control

    Service Bus Namespace 和 Access Control Service Bus Namespace简述 https yourapp servicebus windows net foo bar baz 就是一个name
  • 【必看】时序逻辑仿真成组合逻辑?你知道原因吗?

    对于初学者 一般会遇到这种情况 明明写的时序逻辑 结果仿真结果却是组合逻辑 然后看遍设计代码 始终找不到原因 交流群 知乎这种问题随处可见 但不要怀疑软件问题 modelsim这些专用软件基本不会遇见软件自身问题 原因其实很简单 因为多数人
  • 常用内存数据库介绍(四)

    4 5 H2 Database h2是Thomas Mueller提供的一个开源的 纯java实现的关系数据库 官方网站 http www h2database com html main html 它的主要特性是 非常速的数据库引擎 开源
  • 《算法图解》总结第 7 章:狄克斯特拉算法

    仅用于记录学习 欢迎批评指正 大神勿喷 系列文章目录 算法图解 总结第 1 章 二分查找 大O表示法 算法图解 总结第 2 章 数组和链表 选择排序 算法图解 总结第 3 章 while循环 递归 栈 算法图解 总结第 4 章 分而治之 快
  • mac safari无法打开网页_Safari浏览器无法打开网页,因为您的iphone尚未接入互联网...

    原因如下 1 移动数据没打开 如果苹果手机出现游览器无法打开网页 我们专首先要查看手机上面网络属数据是否开启 如果忘记开启网络数据的话 那么没有网络也就无法打开访问网页 这个时候 打开系统设置将蜂窝移动数据按钮打开 即可解决这个问题 2 检
  • FastCGI sent in stderr: “Primary script unknown“ while reading response header from upstream问题解决

    error 1439 1439 5 FastCGI sent in stderr Primary script unknown while reading response header from upstream php对接nginx的配
  • wifi 概念

    wifi 的一些概念 转载 http blog csdn net eager7 article details 8117600 python view plain copy 1 什么是WIFI Wi Fi 原先是无线保真的缩写 Wi Fi
  • html中哪些是行内元素,html行内元素有哪些

    html行内元素有 a b u span img input strong select sub sup label em button textarea tt var samp br cite code font strike等等 本教程
  • layui文件上传后台(带自定参数)

    记录layui文件上传方法 前端页面直接看layui文件上传相关文档就行 主要是记录后端Java接收上传流并保存的方法 layui文档 https www layui com doc modules upload html 因为该方法使用M
  • [BSidesSF2019]goodluks

    BSidesSF2019 goodluks 考点 题解过程 flag 考点 1 EFF 骰子密码 2 Linux删除的文件恢复 3 LUKS加密 题解过程 开局给了一张图片和一个img的文件 首先使用查看镜像的文件内容 是一个MBR的启动项
  • matlab非线性规划

    1 非线性规划matlab函数 非线性规划函数的约束函数和目标函数至少有一个是非线性函数 而对比于线性规划的区别也就一眼识别了 MATLAB中用于求解非线性规划的函数为fmincon 其调用格式如下 x fmincon f x0 A b x
  • java调用webservice接口 几种方法

    webservice的 发布一般都是使用WSDL web service descriptive language 文件的样式来发布的 在WSDL文件里面 包含这个webservice暴露在外面可供使用的接口 今天搜索到了非常好的 webs
  • python数据预处理之缺失值的各种填补方式

    如果你觉得文字看着枯燥 可以看配套讲解视频 讲解视频 对于数据挖掘的缺失值的处理 应该是在数据预处理阶段应该首先完成的事 缺失值的处理一般情况下有三种方式 1 删掉缺失值数据 2 不对其进行处理 3 利用插补法对数据进行补充 第一种方式是极
  • 修改 bootargs 方式增加分区(mtd分区和blkdevparts分区)

    1 Linux内核设置分区的两种方式 1 1 内核代码中写死 在内核的平台代码中写死 然后在初始化NandFlash的时候设置 1 2 uboot通过bootargs传递分区表 1 u boot将分区信息 形如 mtdparts xxx b
  • 机器学习之逻辑回归,代码实现(附带sklearn代码,小白版)

    文章目录 前言 一 逻辑回归能够解决什么 二 公式 三 激活函数 四 如何求得w 六 逻辑回归代码实现 五 sklearn demo 总结 前言 虽然名字带有回归 但实际上是一个常用的二分类算法 并且在预测的时候能够提供预测类别的概率 一
  • antd中Form.useForm()使用方式

    这里写自定义目录标题 onRow 表单Form useForm onRow table table record 点击后获取的数据对象 onRow record gt return event获取当前列元素节点 可用 event targe