首页 ›  文章

antd 动态新增/删除Form

2019-12-04

* 前言

在写项目遇到动态新增一整个form表单的需求,当时还遇到坑了,没有get到正确的姿势,所以解决问题就想着写这个文章记录一下。

* 需求

因为form里面的数据还需要正则校验之类的,为了方便,所以打算使用antd的form来写。 form通过数据遍历出来,每个form都可以删除,也可以新增form。 最终实现效果如图: image.png

* 问题与解决

1. 如何保存数据?

当删除一个form时,form中删除的数据出错。而且,每个form的数据还需要函数二次处理。

解决:当时getFieldDecorator的写法不是很正确,应该按照下图这么写 getFieldDecorator(content[${index}].source) 这样就把每个form的数据保存在对应的_content[index]_中,并且form里每项的数据格式也对应了(_content[index].xx_)。

arr.map((item,index)=>(
    <div className={styles.content} key={index}>
    <Icon type="close" className={styles.close} onClick={deleteContent.bind(this,index)}/>
    <Form {...formItemLayout}>
        <Form.Item style={{ width: '50%' }} label="xxx">
            {getFieldDecorator(`content[${index}].source`, {
            initialValue: item.source,
            rules: [],
            })(<Input placeholder="xxx" />)}
        </Form.Item>
...

1. 如何删除form?

这样解决了正确在遍历出来的form里存储数据的问题,现在要之前删除form之后,数据出错的问题。其实有了上面的修改,这步就简单多了。 1、使用form提供的api getFieldValue 获取到整个content数据 2、setFieldsValue,可以设置form的值。使用filter把要删除的数据过滤掉 3、把arr里的要删除的form也删掉,因为form是通过arr遍历出来的。arr.splice(index,1)

const deleteContent = (index)=>{
        confirm({
            title: '确定要删除吗?',
            onOk() {
                const content = form.getFieldValue('content');
                form.setFieldsValue({
                  content: content.filter((item, key) => key !== index),
                });
                arr.splice(index,1)
                dispatch({
                    type: 'xxx/updateStates',
                    payload: {
                        arr
                    }
                })
            },
            onCancel() {},
          });
    }

* 结语

好了,写到这里就结束了。希望有帮到大家,这里最主要的是如果使用数据来遍历form,就最好把getFieldDecorator写成这种格式dataName[${index}].xx

原文链接:segmentfault.com

上一篇:vue 移动端 使用postcssrc.js 并配置文件
下一篇:Antd form表单的使用、设值、取值、清空值
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入