学习
实践
活动
专区
工具
TVP
写文章

recat示例-数据驱动模板及交互获取数据完整流程

前几天在做项目中遇到一个问题,卡了半天时间,想想这个可能大家很容易踩坑,就些出来分享下。

需要是这样的,这是一个Form表单中的一项,为衣服添加尺寸和衣服属性,根据库存情况,不同衣服需要的项是不一样的,也就是需要可以动态创建项。

点击加号,新增一行。

如果使用传统方式实现话,引入jquery,给加号按钮元素加onClick事件,执行clone操作;

这里讲给予react框架来开发,以数据驱动模版,避免直接操作Dom。

首先定义state,整体是个数组,每一项是一个map,其它尺寸(size),颜色(color)是其中的的key值。默认应该显示一列,可以在constructor中设置state如下:

给予selsetData来渲染Dom,注意设置select的默认值时,使用value,需配合使用onChange.

实现用户选择Select功能:

react需要手动处理的,触发事件后,获取选择的值,改动对应state值。因为是数组,要根据数组下标index来找到对应的数据,这里的index在渲染的时候以data-index属性加入到select元素中。在改数据时可以判断下type,区别下size和color两个元素,这样可以公用。

实现新增选择项功能:

根据index拷贝对应数据,插入到数组(selectData)中index的下一位,然后将新的数组数据set下。数据更新后,dom即会新增一列对应数据。

这里实现新增项的功能是实现了,不过会带来一个bug,效果如下:

显然这不是我们像要的效果,新增的项相互关联,互相影响。经排除是引用类型数据操作没考虑深拷贝引起的问题。在新增是,拷贝对应项目的数据,只是复制了引用地址,而非实际的数据,这样在用户选择动态增加的项时,改变的数据都是当时被拷贝的原始数据。所以基于原色数据渲染除所有项目都展示一样的。

找到原因就好解决了,写一个深拷贝的方法,在新增项的函数时拷贝数据时调用下就可以。

深拷贝函数代码:

这样更改下就正常了,效果如下:

示例代码在github上:https://github.com/lihuazhai/frontEndCourse/tree/master/other/src/page/selectList

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180607G0LTNA00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券