问答

antd,react 保存多行(动态加)select数据,如何实现有序存储?

作者:admin 2021-10-09 我要评论

如下图,动态增加整行下拉选框select,保存值,提交表单.现在用Select onChange={this.onChange}方法绑定,能获取每一个select选值. 问如何保存在一个list里,最终提...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

如下图,动态增加整行下拉选框select,保存值,提交表单.现在用<Select onChange={this.onChange}>方法绑定,能获取每一个select选值.
问如何保存在一个list里,最终提交.结构如下图.

如下这样,可以保存每一个select值,如何有序保存?用户可能反复操作,也就是一个select可能重复选几次.

 const selectMap=?[]
  onChange = (value) => {
    this.selectMap.push({

    })
  }

Screenshot from 2020-01-15 11-48-10.png

###

图中显示的每一行有3个select,通过数组list来存放每一行select的值
list里面 每次新增加一个字段,就push一次
list.push({

name1:xx,
name2:xx,
name3:xx

})

修改的时候,可以获取到每行的index
然后利用数组的splice方法
list.splice(index,新的值)

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • antd,react 保存多行(动态加)select数

    antd,react 保存多行(动态加)select数

  • vue页面崩溃报out of memory,该如何解

    vue页面崩溃报out of memory,该如何解

  • 微信 H5 页面在安卓环境下 video 无法

    微信 H5 页面在安卓环境下 video 无法

  • zookeeper 的 ssl 需要的证书该怎么生

    zookeeper 的 ssl 需要的证书该怎么生

腾讯云代理商
海外云服务器