程序员经验分享-hwhale

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

2023-11-09

功能实现效果

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

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

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

代码背景

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

代码思路

  1. 在表单设置一个空数组用来存储每次表单提交的数据，将数据加入到原有的初始数据数组中，更新数组
  2. 将更新后的数据通过消息订阅与发布机制传递给表格组件，表格组件setState更新数据从而更新页面（这一步很关键，因为数据的更新不一定引起页面的更新。虽然此时传递过来的已经是最新的数据，但是这个数据的更新只是改变了初始数据数组的值，并不是通过更新react的状态去更新的，因此不setState数据，Table的页面是不会有变化的）<
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

React

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

随机推荐

  • js计算两个时间相差月份

    约束 结束时间endTime gt 开始时间startTime 思路 之前总是会遗漏掉很多种情况 所以列举出各种情况 发现其规律 1 年 月 endTime getYear startTime getYear 12 2 月 月 endTim

  • 题目45 检查数组中是否存在满足规则的数组组合1（ok）

    给定一个正整数数组 检查数组中是否存在满足规则的数组组合 规则 A B 2C 输入描述 第一行输出数组的元素个数 接下来一行输出所有数组元素 用空格隔开 输出描述 如果存在满足要求的数 在同一行里依次输出 规则里 A B C的取值 用空格隔

  • iframe的父与子窗体之间的传值(IE与FF都可以用)

    请看下面简单例子 不多解释 父窗体 test htm

  • 用花生壳内网穿透实现外网访问内网SQL数据库

    内网穿透实现外网访问内网SQL数据库 温斯坦丁 陈的博客 CSDN博客

  • Hive启动

    1 查看hdfs启动没 start dfs sh 2 查看yarn启动没 start yarn sh 3 查看MySQL启动没 1 service mysqld start 2 mysql uroot p 作者机器密码 hadoop 和hi

  • 02趣味算法 --- 算法复杂性

    14天阅读挑战赛努力是为了不平庸 算法学习有些时候是枯燥的 这一次 让我们先人一步 趣学算法 欢迎记录下你的那些努力时刻 算法学习知识点 算法题解 遇到的算法bug 等等 在分享的同时加深对于算法的理解 同时吸收他人的奇思妙想 一起见证技术

  • 常用分析问题的几种方法

    文章目录 1 5W2H分析法 2 麦肯锡问题解决框架 3 SWOT分析法 4 SMART 1 5W2H分析法 5W2H指的就是7个英文单词 是二战中美国陆军兵器修理部首创 对于决策和执行性的活动措施也非常有帮助 很适合在做项目之前通过这个模

  • spring事务出现的超卖问题

    问题分析 我的代码逻辑如下 Override Transactional isolation Isolation REPEATABLE READ propagation Propagation REQUIRED public synchro

  • C语言数据存储与数据打印的奥秘

    尊师 https blog csdn net yyywill 数据存储 要记住 在计算机中 数据都是以 二进制 来存储的 十六进制 八进制和十进制只是我们人为定义的一种表现形式 数据打印 谈到数据打印 有人可能会说 不就是 printf 吗

  • leetcode精选

    7 LeetCode题目精选 7 1 两数之和 问题链接 https leetcode cn com problems two sum 7 1 1 问题描述 给定一个整数数组 nums 和一个目标值 target 请你在该数组中找出和为目标

  • MySQL 读写分离 使用驱动com.mysql.jdbc.ReplicationDriver

    说明文档 http dev mysql com doc refman 5 1 en connector j reference replication connection html 代码例子 1 import java sql Conne

  • Python3，多线程爬完B站UP主的视频弹幕及评论，我飘了~ ~ ~

    利用线程爬取B站Up主弹幕及评论 1 爬取视频弹幕信息 2 爬取视频评论信息 3 整合代码 线程提速 1 爬取视频弹幕信息 爬取视频的弹幕信息 同样要借助于我们的接口工具 这里我们使用Charles 获取到的弹幕的url地址 弹幕url h

  • tensorflow 数据归一化_【TensorFlow实现机器学习方法】KNN（K近邻算法）实现预测房屋价格...

    一 前言 机器学习KNN算法 K近邻算法 的总体理论很简单不在这里赘述了 二 数据集准备 这里使用比较古老的数据集 是房屋预测的数据集 下载地址 https archive ics uci edu ml machine learning d

  • MATLAB——通过扫频数据反推系统伯德图

    1 获取扫频数据 导入MATLAB 2 计算控制器离散传函 根据扫频数据情况绘制控制器伯德图 3 根据控制器伯德图获取增益 相角数据 4 反算系统增益 相角数据 5 数据平滑处理 得到系统最终伯德图

  • element table 中sortable排序

    在项目中做表格的排序 我使用的是自定义的排序 也就是通过后台接口进行的排序 写个文章记录一下element的三种排序方式 在列中设置sortable属性即可实现以该列为基准的排序 接受一个Boolean 默认为false 可以通过 Tabl

  • API接口整理收集常用Get-Post请求供测试使用

    百度 api集市免费接口 IP地址查询 http apistore baidu com apiworks servicedetail 114 html 频道新闻API 易源 http apistore baidu com apiworks

  • 【XML】学习笔记第四章-schema

    Schema 概述 作用 与DTD相比Schema的优势 基础命名空间 模式 引用方法 通过xsi noNamespaceSchemaLocation引入 通过xsi shemaLocation引入 Schema的语法结构 定义元素的主要语

  • shell脚本3个整数从小到大排序

    read p 请输入一个整数 num1 read p 请输入一个整数 num2 read p 请输入一个整数 num3 不管谁大谁小 最后打印 echo n u m 1 num1 num1 num2

  • Goby自定义漏洞之EXP

    前言 自定义漏洞配合EXP 提高漏洞的利用速度 简直是爽的飞起 自从HVV的时候Goby发布HVV专版 羡慕死了 就是太菜没傍上红方大佬的腿 虽然最终用上了HVV专版 但是一些只有你自己知道的漏洞 或者比较偏门的漏洞 就需要咱们自己来编写P

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

    文章目录 功能实现效果 代码背景 代码思路 代码实现 功能实现效果 点击添加按钮 输入表单内容 表单提交后数据动态添加到Table表格里 如图 初始数据 是在dva的mock文件模拟的死数据 点击添加 输入数据 表单提交后 数据添加到表格里

热门标签