代码训练营1--checkbox

it2022-05-05  101

总结问题:

1. componentWillReceiveProps(){}

2. 逻辑混乱

3.参数设计冗余,导致代码维护成本变高,

  1) value/defaultValue 根本就是一个,不需要设置两个

  2)基础组件不需要过于复杂的设计,(复选框组的接口option中,过度设计,考虑了options为字符串数组的情况,导致维护成本变高,若想增加字符串数组,可进行二次封装)

  3)此处默认值并不能排除undefined情况

 

代码训练营中提出的问题:(本周三7.17以前全部解决)

react组件什么时候render什么是生命周期函数?有什么用?组件什么时候会被销毁受控组件、非受控组件不可变数据React components 与React elements关系 JSX —> react.createElement 语法糖 Renderprops ,和函数组件有什么区别?Setstate之后发生了什么 官方文档->FAQ->组件状态

 

 

不可变数据(state、props,用新的覆盖旧的)+单项数据流(数据向下,事件向上)

 

Render方法里不要写逻辑

 

初始化、setstate、组件自身update、挂载应用

 

 

 

 

 

 

checkbox-group

包括group-item(由checkbox进行了二次封装而来)和 checkAll(同样是由checkbox进行的二次封装)

checkbox-group接口设计

checkbox-group 如何实现

点击checkbox,group 将该checkbox的value、 checked 以props传入 group-item, group根据props的checked对已选中的 checkList 进行添加或删除,将checkList通过onChange回调返回给父组件

checkAll 如何实现

点击checkAll,group根据checkall的状态(checked、unchecked)返回全部value或 空数组[],

另外,当group-item被选中(或取消选中)时。在group中 根据value的长度和option的长度计算checkAll 的状态(全选/未选/半选),

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/LXIN-Y/p/11191451.html

相关资源:jQuery分别获取选中的复选框值

最新回复(0)