React动态增加表单

--------于 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.csdn.net/qq_34149935/article/details/81670248 还有这位老哥的代码 https://codesandbox.io/s/sweet-beaver-lqtb9 提供帮助很大 。