【react+antd4.x】Form+Table可编辑单元格点击编辑错误展示为上一条内容

最新推荐文章于 2024-12-24 18:09:57 发布
最新推荐文章于 2024-12-24 18:09:57 发布
阅读量1.3k 收藏
点赞数 2
分类专栏： 使用antd的疑难杂症 antd 4.X升级变更 文章标签： react.js 前端 antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/all_might1/article/details/123209266
版权
在使用React和Antd4.x的Form+Table组件时，遇到二次编辑单元格显示上一条内容的问题。本文介绍了两种解决方法：官方推荐的setFieldsValue更新数据，以及在编辑完成后调用resetFields()重置表单，避免数据残留。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

想直接看解决方法，目录中就有简述

目录

一、问题描述

二、解决方案

方案一（官方）： 使用setFieldsValue来进行更新

方案二：调用resetFields()方法，对表单进行重置

一、问题描述

需求使用了Form+Table。在第二次点击编辑的时候就会展示上一次点击那条的内容。

 

 

在这个地方是复用了Form.Item，这部分会产生数据残留的问题，估计是不是存在了树里面。官方对于这种问题有给出解决方法

二、解决方案

在这边说两个解决方法，一个是官方的，一个是自己编写过程中摸索出来的

方案一（官方）： 使用<

最低0.47元/天 解锁文章
React结合antd5实现整个表格编辑
Handsome_gir的博客
11-21 1066
通过react hooks 结合antd的table实现整个表格新增编辑
antd中的Form、FormItem、FormList、FormList + Table详解
hole_diss的博客
11-16 2077
Form是高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
可编辑表格(React hooks) 一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当表格涉及到内容的修改的时候 如何使用 安装 $ yarn add antd-editable 使用 默认已经开启所有的单元格可编辑。如需禁用某列的可编辑，只需要在传入 columns 里设置对应列的 editable 为 false。 如需禁用某行的可编辑，只需要在传入 dataSource 里设置对应行的 editable 为 false。 每一次输入框失焦后，会在组件内部保存一个新的 dataSource ，可以传入一个 onCellChange 的回调函数用于捕获这个实时的 dataSource 用于一些类似
基于 React + AntDesign4.x 实现的可编辑表格，可满足大部分使用场景
欢迎光临
01-25 4235
可编辑任意单元格，单元格类型可选：输入框、单选框、下拉列表、分组下拉列表 属性列表 参数 说明 类型 默认值 style 覆盖样式 Object {} columns 表格列 Array [] onChange 单元格内容修改回调 function(Object) - isAddRow 是否允许新增行 boolean true isDeleteRow 是否允许删除行 boolean true isSelectRows 是否显示勾选框 boolean true isSe
关于Ant Design of Vue中form表单编辑或新增后再次点击编辑或新增依然出现上一条数据问题
amy_victory的博客
01-13 4224
在使用Ant Design of Vue这个框架时，界面创建新增和编辑时，出现一个问题，就是新增信息保存后再新增一条信息发现上一条新增的记录还在form表单里并没有清除，不管怎么去清除数据依旧出现这个问题，还有编辑的时候也同样出现这个问题，编辑完一条信息后还编辑后者新增第二条信息依然出现的是上一条信息的数据在form里面，所以一定要仔细阅读官网文档，不然就容易踩了这个坑。其实这个问题不难解决。官网文档已经写好方法了 resetFields 重置一组输入控件的值（为 initialValue）与状态，
antd design（4.x）中的Form编辑表单
waillyer的博客
08-18 2956
antd 3.x 版本升级到 antd 4.x 版本存在兼容 移除废弃的 API 移除了 Modal.xxx 的 iconType 属性，请使用 icon 替代。 移除了 Form.create 方法，form 现可由 Form.useForm 获取。 移除了 Form.Item 的 id 属性，请使用 htmlFor 替代。 需求：从用户列表页面进入编辑页 通过ID查到用户信息，回填表单 （1） 跳转页面 render: (text, record, index) => ( <div&
React 实现table内单元格可编辑
Blablabla_的博客
06-25 2659
Ant Design中给出了实现的办法，但个人觉得有点略微复杂，且在函数组件中似乎还要改写这部分。所以自己实现了一下这个功能，用于函数组件中。 示例： const ConfigRule = React.forwardRef(({ getFieldDecorator }, ref) => { const [dataSource, setDataSource] = useState([]); const columns = [ { title: '序号', dataInd
在antd Table中插入可编辑的单元格实例
01-21
补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求： 实现功能说明： 点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据 在...
React使用antd实现可编辑单元格
见贤思齐焉，见不贤内自省
02-09 4236
React使用antd实现可编辑单元格
ant desgn 可编辑单元格（React）
09-12 391
【代码】ant desgn 可编辑单元格（React）
React-editable-table:从头开始React可编辑表格
04-19
React可编辑的员工表（数据表） 这个项目是使用任何外部模块（例如react-data-grid，react-datasheet等）从头开始创建的。 特征 在一张桌子中查看所有员工 编辑所需的单元格（内联编辑） 将任何行标记为已删除 撤消删除操作 获取更新的（如果任何属性与初始值不同）雇员的列表。 如果任何单元格的值均已更改，但随后又恢复为先前的值，则不会假定此员工为已更新。 获取标记为已删除的员工列表。 如果已更新员工，然后将其标记为已删除，则该员工将保留在已删除列表中。 重置数据（将所有更改返回到初始状态） 通过单击“提交数据”按钮查看更新和删除的员工的JSON数据 下载JSON数据 搜索功能 基本验证（日期，电话号码验证等） 分页 好好享受！ :vulcan_salute: :raising_hands:
react-使用antd实现表格增删编辑分别基于react162和react163实现两种方式
08-15
使用antd实现表格增、删、编辑，分别基于react16.2和react16.3实现两种方式
React 实现table内单元格可编辑 （hooks）
HHaox_x的博客
10-27 5734
双击可编辑 失去焦点或者键盘回车事件保存，自己封装组件 并调用 拿走即用 自己封装的组件： import React, { useContext, useState, useEffect, useRef } from "react"; import { Table, Input, Form } from "antd"; import { FormInstance } from "antd/lib/form"; import styled from "@emotion/styled"; import C
react+antd的Table组件编辑单元格
最新发布
outstanding木槿
12-24 969
3. 有直接调接口默认回显数据、有Input输入框形式（当增加一行新的，默认显示图片2的效果。当选择了“纸质普票”，这一行就变成图3 的效果。当选择“纸质普票”以外的选项，又会变成图2 的形式。2. 当下拉选择的数据不同，展示出的第4567列也不同。4. 编辑好当前行，不保存无法再新增一行。代码仅供参考，里面涉及的业务逻辑可以忽略，可以看主要内容。第一列是下拉选择框，第2 3列是TextArea，图1。真实的业务需求（antd 3 版本+react）新增加一行，且单元格可以编辑。1. 默认增加一行时，
antd+react实现表单新增一行，且可自由编辑单元格
qq_52845451的博客
11-12 3458
antd+react实现表单新增一行，且可自由编辑单元格
可编辑单元格
weixin_56036824的博客
03-05 384
EditCellTable import React, { useContext, useState, useEffect, useRef } from 'react'; import { Table, Input, Form } from 'antd'; import { FormInstance } from 'antd/lib/form'; import style from './index.less' const EditableContext = React.createContext<
React+antd实现可编辑单元格，非官网写法，不使用可编辑行和form验证
six66667的博客
09-07 1049
antd3以上的写法乍一看还挺复杂，自己写了个精简版。没用EditableRow+Cell的结构，也不使用Context、高阶组件等，不使用form验证。现在这个可编辑单元格组件在鼠标失焦或者回车后，列数据会变回修改前的数据，在state里面加个text，把最后显示的 {children} 换成 {text} 就可以。最后使用的时候直接在column元素的render里面 就好啦， props一定要传处理保存修改的方法。
antd表单编辑时，校验失效
清风了了的博客
05-21 2700
提交表单时需要组织表单的默认行为。 handleSubmit = (e) => { e.preventDefault(); ...... } 最近遇到的一个坑，记录一下。
react-ant design table表格 多级可编辑表格
m0_57553089的博客
07-19 2064
antd-react 3X版本 多级可编辑table
用react+hook+antd写一个可编辑的表格
03-31
以下是一个简单的可编辑表格的示例代码，使用React Hook和Antd组件库： ```javascript import React, { useState } from 'react'; import { Table, Input, InputNumber, Popconfirm, Form } from 'antd'; const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值