react小练习-antd Form表单和Table表格的交互-Table动态添加数据

最新推荐文章于 2024-07-03 13:53:16 发布
最新推荐文章于 2024-07-03 13:53:16 发布
阅读量4.4k 收藏 6
点赞数 5
分类专栏： 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46313328/article/details/116015181
版权
本文介绍如何使用React和Ant Design的Form组件与Table组件进行交互，实现动态添加数据的功能。通过在表单组件中设置空数组保存表单提交的数据，并更新到表格组件的数据源，利用消息订阅发布机制确保表格页面的实时更新。同时，文章还讨论了为新增数据分配ID的重要性，以便后续实现编辑和删除操作。
摘要由CSDN通过智能技术生成

文章目录

功能实现效果

点击添加按钮，输入表单内容，表单提交后数据动态添加到Table表格里

如图： 初始数据，是在dva的mock文件模拟的死数据在这里插入图片描述
点击添加，输入数据:
在这里插入图片描述

表单提交后，数据添加到表格里

代码背景

表单和表格是两个独立的组件，且各自获取后台mock数据

代码思路
  1. 在表单设置一个空数组用来存储每次表单提交的数据，将数据加入到原有的初始数据数组中，更新数组
  2. 将更新后的数据通过消息订阅与发布机制传递给表格组件，表格组件setState更新数据从而更新页面（这一步很关键，因为数据的更新不一定引起页面的更新。虽然此时传递过来的已经是最新的数据，但是这个数据的更新只是改变了初始数据数组的值，并不是通过更新react的状态去更新的，因此不setState数据，Table的页面是不会有变化的）
代码实现

表单组件：首先在state里设置一个空数组newArr来保存获取的表单数据，即名称和类型

onFinish = (values) => {
   
	//将获取到的表单数据保存到newArr
    this
最低0.47元/天 解锁文章
77n
关注
专栏目录
【React工作记录二十二】ant design实现嵌套table
geyaoisnice的博客
01-02 1024
目录 前言 导语 代码部分 第一步 第二步 总结 运行结果 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 今天页面有了一个新的需求 需要封装一个嵌套table组件 代码部分 第一步 <BaseTable rowKey="code" .
react之antd自定义表单控件(如form + table如何使用)
前端一线搬运工的博客
04-21 9600
Form(表单)Funtion组件代码: const FormComp = () => { //点提交按钮就会触发这个事件并打印Form表单的值 const onFinish = values => { console.log('Received values from form: ', values); }; return ( ...
ant design vue 1.7.8版本-动态表单（二）-多层嵌套
最新发布
xiaoxu_H的博客
07-03 653
跟单层嵌套循环的区别是，多层嵌套在删除后，不仅要把没被删除的父节点的数据赋值，还要把没被删除的子元素的数据赋值，形成新的Object类型键值对的数据，再通过form的setFieldsValue重新赋值给form。2. 判断是2个短杠，要判断前面第一个短杠后面的数字跟父节点的Index比较, 如果相等，表示操作的是这个父节点下的数据，处理下index, 把新的处理的后的键，赋值。3. 判断是2个短杠，但跟父节点的index不相等，说明不是操作的这个父元素下的子节点，也不需要动，直接赋值。
React结合antd的Form表单和可编辑的Table表格实现信息收集
m0_54222709的博客
08-14 298
import React from 'react'
react 入坑学习（三）ANTD Form 读取其中Table数据
JeffanChen的博客
07-13 1961
ANTD Form 读取其中Table数据 首先将table中的数据保存起来，我这里使用了selectRoleRow来保存。 form.item 里的name 可以先不定义 let selectRoleRow=[]; rowSelection={{ onChange: (selectedRowKeys, selectedRows) => { selectRoleRow=selectedRows; }, }} 然后是我们的
Ant Design 使用Tabs和Form.List 实现二维数组结构
殇之何伤的博客
10-19 5153
使用场景与实现效果 需求的数据结构为可编辑的二维数组结构，在Form表单中提交数据到服务端,下面为数据结构的例子： [ [{ "text": "", "audioUrl": "", "emotion": "" }, { "text": "", "audioUrl": "", "emotion": "" }], [{ "text": "", "audioUrl": "", "emotion": "" }, { "text": "", "audioUr
React+AntDesign结合Table、Modal+Form的使用，以及Ant Design 4.x Modal + Form搭配使用时，如何在Modal中使用表单验证
你是我修复不了的bug，但我会用一生去维护
11-23 1375
React+AntDesign结合Table、Modal+Form的使用 最近写React + AntDesign时，使用到Modal和Form组件时候，因为Modal组件自带onOk按钮，因此不能使用Form自带的onFinish函数进行表单验证，查了查资料，大致了解是通过使用 ref 的方式获得表单值甚至可以发起表单校验方法。不多说了，直接上代码。 export default class App extends Component { formRef=React.createRef(); s
Antd中Form表单与Table表格联合的简易使用
qq_43156334的博客
03-18 9585
Form.Item 中使用 valuePropName 来指定子节点的值的属性，例如Table的数据源为dataSource，Switch的数据源是checked 在Table的columns中定义需要表单控制的数据，render返回Form.Item import { Button, Form, Input, Table } from 'antd' import React, { useEffect } from 'react' const About: React.FC = (props: any.
react-使用antd实现表格增删编辑分别基于react162和react163实现两种方式
08-15
在React开发中，Ant Design（简称antd）是一个广泛使用的组件库，它提供了丰富的UI组件，包括表格（Table）等，极大地简化了前端开发者的工作。在本教程中，我们将深入探讨如何利用antd来创建一个具有增、删、编辑...
antd 的form 表单怎么回显数据_封装react antd的form表单组件
weixin_35565522的博客
12-30 2799
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了，...
管理系统系列--一個简洁的 antd-react-admin 应用 -- React + Antd 后台管理系统 .zip
02-26
【标题】中的“antd-react-admin”是一个基于React和Ant Design的后台管理框架，它提供了构建高效、美观的企业级管理界面的快速解决方案。Ant Design（简称antd）是阿里巴巴开发的前端UI库，它提供了丰富的组件和...
wangeditor富文本与react antd表单结合
m0_46313328的博客
10-25 898
如上图，在输入框里输入的富文本内容，在点击确定按钮后会解析到下方“富文本内容”处展示 下面是完整代码 import React, { useEffect, useState } from 'react' import { Form, Button} from 'antd' import E from 'wangeditor' const IndexPage = () => { const [form] = Form.useForm() const [content, setContent].
antd table form 表单验证
yinyueyu007的博客
02-11 524
antd 表格内支持 表单校验
antd Table，Form
weixin_43924896的博客
09-10 1450
antd-table组件的经验
React antd组件Table的使用
LVHA529的博客
12-17 1833
当有Modal使用的时候，有确认按钮时，要使用validateFields来获取Modal的值。常用功能：搜索、下拉搜索、批量删除、时间筛选、添加按钮、页码跳转 查询和重置按钮。一般是Form表单结合Input两个一起使用，使用里面的Form表单的。回填还要配合着initialValues默认值，第一次进来就渲染，也可以使用表单的getFieldsValue来获取。表单的回填，使用就是利用下面这个方法回填。具体操作如下：有Modal弹出的使用。表单的查看不能修改：readOnly。
form表单和table表格（html部分）
m0_74377868的博客
03-29 836
form表单form表单，它是用于指定表单数据的提交方式和地址。其具有以下几种属性：用于指定表单的名称，方便后续提交使用。：表单的唯一名称，一般用于提交或样式设置。：用于定义表单数据的提交地址。：用于指定表单数据的提交方式。：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小，适用与内容较小的数据提交。：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制。5.
react项目，动态形成table的表头
qq_45222993的博客
05-25 1697
前提： filterData是一个数组，这个数组的值根据一个下拉框的值筛选出来的 整个的需求是生成图片这样的表格，表头是动态生成的，tbody的地方生成的是input框（两个图片是连接起来的，两个部分的表头来源不一样而已） 最后save的时候传递给后端的payload格式是 "table_header": "", "template_id": "", "upstream_base_config_id": "", "upstream_temporary_config_id": "", "ups
antd 4.x, 实现Table 可编辑 , Table 结合Form.List,实现单独校验Form.List、Form.Item校验
qq_42359718的博客
07-11 5105
Table 嵌套Form.List 编辑、修改、校验、保存
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值