当前位置:   article > 正文

问题:AntD动态增减多个form被同一个事件控制_antd from 新增

antd from 新增

问题背景:

        用了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

附上代码片段: 

  1. {this.formRef.current.getFieldsValue("redblack")?.cards.map(item => item?.redblack)[name]&&<Row>
  2. <Col span={8} offset={4}>
  3. <Form.Item
  4. {...restField}
  5. initialValue={5}
  6. label="滴滴"
  7. name={[name,'red']}
  8. rules={[
  9. {
  10. validator(_, value) {
  11. if (!value || !isNaN(value)) {
  12. return Promise.resolve();
  13. }
  14. return Promise.reject(new Error('只能为数字!'));
  15. },
  16. }
  17. ]}
  18. >
  19. <InputNumber autoComplete="off" addonAfter="个" style={{width:100}} />
  20. </Form.Item>
  21. </Col>
  22. <Col span={8}>
  23. <Form.Item
  24. {...restField}
  25. initialValue={5}
  26. label="哒哒"
  27. name={[name,'black']}
  28. rules={[
  29. {
  30. validator(_, value) {
  31. if (!value || !isNaN(value)) {
  32. return Promise.resolve();
  33. }
  34. return Promise.reject(new Error('只能为数字!'));
  35. },
  36. }
  37. ]}
  38. >
  39. <InputNumber autoComplete="off" addonAfter="个" style={{width:100}} />
  40. </Form.Item>
  41. </Col>
  42. </Row>}

        文章是自己记录一下(写的很水没有啥高质量营养,如果有写的不对的地方留言我,我会偷偷改掉,感谢!!!)

愿路过的大佬平安喜乐

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/91595
推荐阅读