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

最新推荐文章于 2024-05-26 07:45:00 发布
最新推荐文章于 2024-05-26 07:45:00 发布
阅读量4.3k 收藏 6
点赞数 5
分类专栏： 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46313328/article/details/116015181
版权
这里写自定义目录标题功能实现效果代码背景代码思路代码实现功能实现效果点击添加按钮，输入表单内容，表单提交后数据动态添加到Table表格里如图： 初始数据，是在dva的mock文件模拟的死数据点击添加，输入数据: 表单提交后，数据添加到表格里代码背景表单和表格是两个独立的组件，且各自获取后台mock数据代码思路在表单设置一个空数组用来存储每次表单提交的数据，将数据加入到原有的初始数据数组中，更新数组将更新后的数据通过消息订阅与发布机制传递给表格组件，表格组件setState更新数据从而
摘要由CSDN通过智能技术生成

文章目录

功能实现效果

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

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

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

代码背景

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

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

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

onFinish = (values) => {
   
	//将获取到的表单数据保存到newArr
    this
最低0.47元/天 解锁文章
77n
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-使用antd实现表格增删编辑分别基于react162和react163实现两种方式
08-15
在React开发中，Ant Design（简称antd）是一个广泛使用的组件库，它提供了丰富的UI组件，包括表格（Table）等，极大地简化了前端开发者的工作。在本教程中，我们将深入探讨如何利用antd来创建一个具有增、删、编辑...
antd 4.x, 实现Table 可编辑 , Table 结合Form.List,实现单独校验Form.List、Form.Item校验
qq_42359718的博客
07-11 4791
Table 嵌套Form.List 编辑、修改、校验、保存
Antd中Form表单与Table表格联合的简易使用
qq_43156334的博客
03-18 9207
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 Table表格组件-06
最新发布
编程是一门实践技术
05-26 480
> 前面基本了解了组件的基本用法，在本节会实现一个更高级的例子。另外需要注意`本节代码是采用V15版本的createClass()、React.DOM和JSX实现的`，有时间的同学可以改成类实现的方式。 html的世界中最复杂的UI控制就是表格了，原因是table它依赖本地环境来创建，不同的系统不同的浏览器对table的实现并不一样，也导致有些功能换了个浏览器不就好用了。
React结合antd的Form表单和可编辑的Table表格实现信息收集
m0_54222709的博客
08-14 269
import React from 'react'
react之antd自定义表单控件(如form + table如何使用)
前端一线搬运工的博客
04-21 9530
Form(表单)Funtion组件代码: const FormComp = () => { //点提交按钮就会触发这个事件并打印Form表单的值 const onFinish = values => { console.log('Received values from form: ', values); }; return ( ...
form表单和table表格（html部分）
m0_74377868的博客
03-29 805
form表单form表单，它是用于指定表单数据的提交方式和地址。其具有以下几种属性：用于指定表单的名称，方便后续提交使用。：表单的唯一名称，一般用于提交或样式设置。：用于定义表单数据的提交地址。：用于指定表单数据的提交方式。：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小，适用与内容较小的数据提交。：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制。5.
react 入坑学习（三）ANTD Form 读取其中Table数据
JeffanChen的博客
07-13 1929
ANTD Form 读取其中Table数据 首先将table中的数据保存起来，我这里使用了selectRoleRow来保存。 form.item 里的name 可以先不定义 let selectRoleRow=[]; rowSelection={{ onChange: (selectedRowKeys, selectedRows) => { selectRoleRow=selectedRows; }, }} 然后是我们的
antd-schema-form:Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design，可以通过JSON Schema配置生成可交互的表单
05-01
蚂蚁模式基于Antd-schema-form的 ，可以使用配置快速生成交互式表单。 此[Demo]（ ）仅显示了如何通过配置schema.json来构造表单。开始使用使用之前，需要在babel配置antd。 您需要按以下方式配置babel-loader： { ...
管理系统系列--一個简洁的 antd-react-admin 应用 -- React + Antd 后台管理系统 .zip
02-26
【标题】中的“antd-react-admin”是一个基于React和Ant Design的后台管理框架，它提供了构建高效、美观的企业级管理界面的快速解决方案。Ant Design（简称antd）是阿里巴巴开发的前端UI库，它提供了丰富的组件和...
react-初步探索reactreactrouterdomantd做后台管理模板
08-15
例如，可以使用`Form`组件来构建表单，`Table`组件来展示数据，`Button`和`Input`组件进行交互操作，`Layout`组件来组织页面结构。 集成这三个库的过程通常如下： 1. 安装依赖：使用npm或yarn将react、react-dom、...
r-Antd:试用Antd.design
04-27
6. **表单**：使用 Form 组件进行数据验证和管理，结合 Form.Item 和各种输入组件，实现动态表单。 7. **布局**：利用 Grid 系统进行页面布局，包括 Row 和 Col 组件。 8. **数据展示**：Table、List、Card 等组件...
React利用Antd的Form组件实现表单功能
热门推荐
GuanJdoJ的博客
10-23 2万+
========2023.2.17更新======== 现在ant.design已进入V5版本，表单基础用法和V4基本一致，代码示例如下：
antd Table，Form
weixin_43924896的博客
09-10 1407
antd-table组件的经验
antd 可编辑table项，并提交编辑后的内容
Mia的博客
05-05 563
antd table 可编辑
antd的Form实例控制表格，表格可收集/回显数据
qq_52845451的博客
03-09 1020
antd的Form组件控制表格，表格可收集/回显数据
React+AntDesign结合Table、Modal+Form的使用，以及Ant Design 4.x Modal + Form搭配使用时，如何在Modal中使用表单验证
你是我修复不了的bug，但我会用一生去维护
11-23 1300
React+AntDesign结合Table、Modal+Form的使用 最近写React + AntDesign时，使用到Modal和Form组件时候，因为Modal组件自带onOk按钮，因此不能使用Form自带的onFinish函数进行表单验证，查了查资料，大致了解是通过使用 ref 的方式获得表单值甚至可以发起表单校验方法。不多说了，直接上代码。 export default class App extends Component { formRef=React.createRef(); s
react+antd 实现表单动态增加Table可编辑行，且表单可验证
ll_883963的博客
06-07 2445
【代码】react+antd 实现表单动态增加Table可编辑行，且表单可验证。
react导出excel表格
10-10
可以使用第三方库"react-csv"来导出Excel表格。首先需要安装该库： ``` npm install react-csv --save ``` 然后在组件中引入该库并使用其中的CSVLink组件，在CSVLink组件中设置数据和文件名即可导出Excel表格。示例代码如下： ``` import React, { Component } from 'react'; import { CSVLink } from "react-csv"; class ExportExcel extends Component { constructor(props) { super(props); this.state = { data: [ ['Name', 'Age'], ['Tom', '20'], ['Jerry', '22'] ] }; } render() { return ( <CSVLink data={this.state.data} filename={"my-file.csv"}> Export to CSV </CSVLink> ); } } export default ExportExcel; ``` 此例中，将data属性设置为一个二维数组，第一行是表头，后面的行是数据。filename属性设置导出Excel表格的文件名。点击"Export to CSV"按钮即可导出Excel表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值