[JavaScript知识库]每日工作问题记录总结(好习惯 打卡7/？)

今日份工作问题总结及小周报

2021/12/27 from 高鑫川

今天的工作内容：

1. 解决之前遗留下的人脸库项目-特征值下发及图片下发模块-新增下发任务功能弹窗的Form表单控件无法监听自定义组件数据变化的问题

解决方法： 根据之前总结的 ANTD 的 Form 组件对于用户自定义组件进行数据监听的 api 的学习，了解到自定义组件想被 Form 监听到需要返回可被监听的 Value 值，可使用子父传值的方式，通过 props 来将想要被监听的数据字段传给外面的 Form 组件 ，具体传值操作为：父子组件均引入 props 属性，通过调用显示 props 可知，Form.Item 子组件得到的 props 中含有 onChange() 方法，通过this.props.onChange(要传的值‘ 此处后期因为需求业务需要改为一个方法 ’) 即完成自定义组件自定义字段的监听 。

2. 解决监听问题后，仍有一个关于 CheckBox 多选框的问题，这里说一下问题背景，页面需求中有一个模块需要的是 ANTD 折叠面板包裹 ANTD 的多选框组成一个自定义组件，需要传递的数据即为多选框中被选中的元素的数据，但 CheckBox 中监听数据变化的方法只有 onChange(e) 方法，但该方法只会返回点击事件即该元素被点击后是否为 选中状态 ，只使用方法无法获得数据内容。

解决方法：1. 解决多选框无法获取数据的问题，我尝试通过 onChange() 事件的自定义方法进行传参，结果发现可行，遂得到多选框数据，但后面又有一个问题，2. onChange 事件会在 CheckBox 状态发生改变时便会调用，所以不管该元素 是否被选中，都会将该条数据传入方法中，之前只是对数据进行简单处理，导致取消某个多选框的选中状态也会在定义的数据中加入该条数据，导致数据重复，之后想到可以通过返回的 event 事件中的 target 中的 checked 来做判断当前数据是否被选中，如果之前未被选中，点击后变为选中，即在定义好的数据中加入该数据，反之，当该数据之前被选中，点击后变为未被选中，即通过方法（定义的存储数据为数组，通过数组的splice()方法）可实现对于该数组的删除，避免重复。

3. 今天还有要总结的一个react项目开发习惯 (可能是我要注意的一些小事，大神们可直接跳过) ，即组件中未来可能会变化的数据建议放在this.state 中，反之，可能长期不会变的一些数据可直接放在组件内，直接 this.数据名=… 即可

4. 今天还有一个比较令人头疼的也还未解决的 (计划明天再排查一下) 新安装在项目中的 less 与 ANTD组件库 及 公司内部组件库存在冲突无法使用。

   嗯 。 。今天差不多就这些吧，最近人脸库这个项目也是问题很多，时间好像也不是很充裕，压力也不小，就只能说加油，做好自己，好好完成项目，一会儿再查一下关于 ANTD 与 less 的相关内容就该睡了。

   哟！！ 这又快十二点了，🆗 打卡

   2021/12/27 23：55 打卡