React动态增加表单

最新推荐文章于 2025-10-12 04:01:35 发布

原创最新推荐文章于 2025-10-12 04:01:35 发布 · 4.6k 阅读

7 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

3 篇文章

订阅专栏

--------于 2019/11/19 10:59点最新更新 ------效果请看下面

-----------------此部分为以往写法 —记录使用
本人React前端开发，最近赶上一需求要实现动态添加用户的姓名与联系方式，这个给我难受的啊！ Jquery搞了一天（本人技术有点渣，jquery写的少），样式效果引入总出问题，好不容易解决样式了，这动态ID实在是搞不定，没办法还是React吧！这顿网上找啊！ API的查看啊！搞了一天终于搞定了。这么说吧只有搞过一次才知道，这地方是多么简单就能实现。。。唉多学啊！（自己保存记录使用）
话不多说先上下效果（样式没俩的及调整，功能没问题）。
在这里插入图片描述

然后是代码

{data.informWay && data.informWay.map((element, index) => (
                                            <span key={index}>
                                                <Col span={12}>
                                                    <Form.Item label="维护人 ">
                                                        {getFieldDecorator(`user${index}`, {
                                                            rules: [{ required: true, message: '请填写维护人', },],
                                                        })(<Input style={{ width: '200px' }} />)}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12}>
                                                    <Form.Item label="维护人联系方式 ">
                                                        {getFieldDecorator(`manile${index}`, {
                                                            rules: [{ required: true, }, { pattern: /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/, message: '请填写正确联系方式' }],
                                                        })(<Input style={{ width: '200px' }} />)}
                                                    </Form.Item>
                                                    {index < 5 && <Button shape="circle" size="small" icon="plus" type="primary" onClick={() => this.onLinkWayAdd(index)} />}
                                                    {index > 0 && <Button shape="circle" size="small" icon="minus" type="default" onClick={() => this.onLinkWayRem(index)} />}
                                                </Col>
                                            </span>
                                        ))}

主要思路通过添加变量内的数值，实现数据的动态添加。
那个data.informWay 这个东西就是个数据模型

 newdata: {
                informWay: [{ contactName: '', contactWay: '' }]
            }

就是这个样子的

onLinkWayRem/onLinkWayAdd 这连个方法作用是处理你要增加还是减少的数组的数据使用

onLinkWayAdd = (index) => {
        const { newdata } = this.state;
        if (newdata.informWay.length < '4') {
            let da = { contactName: '', contactWay: '' }
            newdata.informWay.push(da);
            this.setState({
                newdata
            })
        }
    }
    onLinkWayRem = (index) => {
        const { newdata } = this.state;
        newdata.informWay.splice(index,1)
        this.setState({
            newdata
        })
    }

    handleSubmit= e => {
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
              console.log('Received values of form: ', values);
            }
          });
    }

-------于 2019/11/19 10:59点最新更新 ---------
先上效果图：
没动态图凑合看吧！在这里插入图片描述
删除第二条数据

主要思路：新增效果的实现我是顶一个keys keys是一个数据
例子keys=[ 0,1,2,3,4,] 这样的一个数据然后我通过循环该数据来实现数据的增加还是删除功能（更改数组key 通过 concat 增加，通过filter 删除对应的数组）
代码

 //新增
    onLinkWayAdd = (index) => {
        const {keys,}=this.state;
        const nextKeys = keys.concat(id++);
        this.setState({
            keys:nextKeys,
        })
    }
    // 减少
    onLinkWayRem = (k) => {
        const {keys}=this.state;        
        const nextKeys = keys.filter(key => key !== k);
        this.setState({
            keys:nextKeys,
        })
    }

这个是html（部分但是给的全）

<div>
                                            {keys.map((Item, index) => (
                                                <div key={index}>
                                                    <Col span={4}>
                                                        <Form.Item label="维护人" labelCol={{ span: 12 }} wrapperCol={{ span: 5 }}>
                                                            {getFieldDecorator(`connectpeo[${Item}]`, {
                                                                rules: [{ required: true, message: '请填写维护人', },],
                                                            })(<Input style={{ width: '100px' }} disabled={disabledUpda} />)}
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={6}>
                                                        <Form.Item label="联系方式" labelCol={{ span: 8 }} >
                                                            {getFieldDecorator(`connectnum[${Item}]`, {
                                                                rules: [{ required: true, }, { message: '请填写正确联系方式' }],
                                                            })(<Input style={{ width: '200px', }} disabled={disabledUpda} />)}
                                                        </Form.Item>
                                                    </Col>

这个这是新增的效果

另外还有一个效果我修改效果
背景：我回调数据展示，我觉得我的用户信息有点错误我要删除修改他
在这里插入图片描述
其他的跟新增的效果一样图我就不来了
这个回调数据主要问题：我新增完数据去删除旧的数据会导致我新的数据 key值不绑定丢失
解决思路：增加Key绑定

{user.length == 0 ? null : keys.map((Item, index) => {
                                            let bool = (Item+1<= user.length)   // 处理 新增时 状态
                                            console.log("bool: ",bool);
                                            
                                            return (
                                            <div key={index}>
                                                <Row>
                                                    <Col span={4}>
                                                        <Form.Item label="维护人"   labelCol={{ span: 12 }} wrapperCol={{ span: 5 }}>
                                                            {getFieldDecorator(`connectpeo[${Item}]`, {
                                                                initialValue:bool?user[Item].CONNECTPEO:null,
                                                                rules: [{ required: true, }],
                                                            })(<Input style={{ width: '100px' }}  disabled={disabledUpda} key={Item}/>)}
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={6}>
                                                        <Form.Item label="联系方式"   labelCol={{ span: 8 }} >
                                                            {getFieldDecorator(`connectnum[${Item}]`, {
                                                                initialValue:bool?user[Item].CONNECTNUM:null,
                                                                rules: [{ required: true, }],
                                                            })(<Input style={{ width: '200px', }} key={Item} disabled={disabledUpda} />)}
                                                        </Form.Item>
                                                    </Col>

user 是我从后台获取到的数据内容我的格式是对象数组的格式
[{},{},{}] 这样的然后我通过keys作为我数据的索引通过删除keys的数组中的数据[0,1,2,3,4] 中的某个数据例如：2
来实现user中数据的展示功能 ps：数据一定要进行kye值绑定啊
加班2天的教训还有写代码一定要细心我一个item跟index 两个位置让我处理了一天半。
新增代码删除代码跟上面的一样思路都是一个
还有 keys的来源是我在处理获取后台数据的时候，通过 for循环往里写入的一个数组（获取user的长度，然后for循环写入）
新增中的ID 是我顶一个一个全局变量。

至此 React动态新增输入框问题解决
***个人主要思路：一个数据 keys来操作我输入框几行我通过操作keys 来实现，其他方法也有只不过没想到各位老哥有好的方法欢迎交流 ***

写法比较LOW 但是能实现就是好方法。接下来就是调整样式上了。样式还没想好咋处理等下周的吧！加班了两周了偷个懒周末爬山去。
另外感谢这位老哥的CSND的内容，讲道理我的大部分思路都是按着他的里面来的，再此感谢https://blog.youkuaiyun.com/qq_34149935/article/details/81670248
还有这位老哥的代码
https://codesandbox.io/s/sweet-beaver-lqtb9
提供帮助很大。