Antd form 输入框列表使用 react-beautiful-dnd 拖动组件后值被覆盖

Antd form 输入框列表使用 react-beautiful-dnd 拖动组件后值被覆盖,第1张

项目场景:

有一串用Antd(3.x) 写的key 和 value 输入框列表,使用了表单的getFieldDecorator 管理数据,列表使用react遍历,可以修改值,用作配置项,存储在state中。
数据对象结构:

[
	{key: 'aaa', value:'bbb'},
	{key: 'aaa', value:'bbb'},
	{key: 'aaa', value:'bbb'},
	{key: 'aaa', value:'bbb'},
	{key: 'aaa', value:'bbb'}
]

使用 react-beautiful-dnd 拖动组件给加上拖动功能,使配置顺序可以互换


问题描述

初始化后直接拖动,然后onDragEnd中setState存储数据,没有问题。
当编辑某一输入框,然后再去拖动该列与其他列互换,换到该列的和刚才被修改值的组件位置对应的组件的数据会被改成刚才修改的值,导致原来的值丢失。即使设置的setState没问题。


原因分析:

由于使用了getFieldDecorator,数据被form接管,查询api 发现:
所以我改了state里的值重新渲染就不对,主要原因还是被换过来的输入框被当做之前的输入框进行了值绑定,所以说明是唯一索引 key的问题,我遍历展示数据时给单项加的唯一索引是用的 index,所以组件之间位置换了,新换过来的组件的索引就变成原来组件的了,就会被当成原来的组件。


解决方案:

但是这里只是我表单的局部,要给原始数据加一个唯一id 不好实施。
尝试后实在没办法替换索引为唯一的值而不是使用index。所以在初始化上打主意,每次拖动组件换了位置之后,onDragEnd 里面setState存储新的数据列表值并且初始化(resetFields)这部分表单值,那么数据就会展示为拖动换位置之后的样子。

遗留问题是,当修改了input值,没有触发blur,直接拖动组件和其他组件换位置时,组件的focus还是停留在原来位置上新组件上,而没有跟随开始修改的组件,这同样是设置key为 index值遍历导致的问题。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1324799.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存