赞
踩
用了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={4}>
- <Form.Item
- {...restField}
- initialValue={5}
- label="滴滴"
- name={[name,'red']}
- rules={[
- {
- validator(_, value) {
- if (!value || !isNaN(value)) {
- return Promise.resolve();
- }
- return Promise.reject(new Error('只能为数字!'));
- },
- }
- ]}
- >
- <InputNumber autoComplete="off" addonAfter="个" style={{width:100}} />
- </Form.Item>
- </Col>
- <Col span={8}>
- <Form.Item
- {...restField}
- initialValue={5}
- label="哒哒"
- name={[name,'black']}
- rules={[
- {
- validator(_, value) {
- if (!value || !isNaN(value)) {
- return Promise.resolve();
- }
- return Promise.reject(new Error('只能为数字!'));
- },
- }
- ]}
- >
- <InputNumber autoComplete="off" addonAfter="个" style={{width:100}} />
- </Form.Item>
- </Col>
- </Row>}
文章是自己记录一下(写的很水没有啥高质量营养,如果有写的不对的地方留言我,我会偷偷改掉,感谢!!!)
愿路过的大佬平安喜乐
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。