问题：AntD动态增减多个form被同一个事件控制

卫三金

已于 2022-08-18 15:57:03 修改

阅读量1.7k

点赞数

分类专栏： antD 文章标签： react 前端

于 2022-03-21 20:06:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53512283/article/details/123644373

版权

本文讨论了在使用AntD动态新增表单时遇到的问题，即所有表单被同一事件控制，导致输入同步。问题关键在于动态新增的表单共用同一事件绑定。解决方案是通过fields的下标作为状态控制，为每个表单添加唯一key，并根据key值绑定特定事件，确保事件独立。代码片段展示了具体的实现方式。

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

问题背景：

用了antD的表单动态新增，新增出来的表单会被同一个事件触发，比如我在form1的input框输入内容，form2的input框也会输入和form1相同的内容。

问题原因：

动态新增可以理解为每一个新增出来的form表单都是一个对象（就是在动态创建对象，动态new的感觉）然后这些新创建出来的对象会被添加到 fields 中（fields 是个数组，创建出来的表单也是这个数字渲染出来的），我在添加事件的时候直接写在form中相当于给新增出来的所有form绑定了同一个事件。

问题解决：

fields的下标对应的状态控制每个新增对象，可以解决动态新增出来的的对象中的事件相互影响问题，简单的说就是给你每个新增出来的对象添加key值，用来区分他们，同时绑定的事件也要加上key值（key值相对应的事件触发对应的form）（this.formRef.current.getFieldsValue("redblack")?.cards.map(item => item?.redblack)[name]）

当然获取表单值的方式可以更简单可以直接使用useForm

附上代码片段：

{this.formRef.current.getFieldsValue("redblack")?.cards.map(item => item?.redblack)[name]&&<Row>
                          <Col span={8} offset&#

最低0.47元/天解锁文章