2021-07-19-react-antd-form表单项自定义增加

@TOC业务场景: react-antd-form表单项自定义增加
在这里插入图片描述

  1. 前几天有一个需求,很是头疼,需要用户自行追加Form Item项,起初还以为很简单,做到后面越做越复杂。
  2. 上面是初始页面, 当我们点击+ 就会新增新的Item项,做法很简单,使用push向数组追加即可,
  3. 在这里插入图片描述
    在这里插入图片描述
  4. 这时候第一个坑来了, 渲染的时候, 每一个Item项都需要一个唯一的name名称来确保收集的参数是唯一的,不会重复,所以我用了index来确保每一项都是不重复的, 但是这么做回到是后端接受的参数很难去调用,好在这个还能解决
    在这里插入图片描述

6.前面的index很方便的解决了接收参数唯一的问题,但是又为后面的删除部分埋下了难以处理伏笔,
我们现在加入一些参数在这里插入图片描述
6. 此时,当我删除中间的一项时,会发现列表确实少了一行,但是里面的值却没有变化。经过反复的琢磨最终锁定,每一项的Item都是根据index动态的生成,当我们删除了中间的一行,那么第三行会自定顶替第二行,但是他的index随之也会变成2,那么根据Item name参数是靠index生成的,所以他的值会引用上一个被删除项的值,这确实让人头大,反复想了很多办法都没有破解,最终想到了一个取巧方法。
7. 首先,我们将删除行的name项获取到,就是靠点击删除时传过来的index确定, 使用useForm的form.setFieldsValue()方法,将被删除的这一项与他列表下面的一项的值做替换
8.

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值