阅读数:

react自定义selectpicker组件

0

说明:上次我简单分享的是如何改造datepicker,使得date选择更强大更灵活。
今天分享的是基于上次picker的原理和思想,来构建强大灵活的selectpicker,最终目的是简单配置,就能实现,1-3列的
数据选择,可以是无关联的一列,也可以是有关联的2-3列。

这里我依然用的是上次datepicker的组件框架,其实还是主要利用的selectitem里面de思想。

项目结构

select1

实现思想

  • 传值
    为了传递参数方便,设计的data格式如下;
1
2
3
4
5
data={
v1,
v2,
v3
}

抑或

1
2
3
4
data={
v1,
v2,
}

抑或

1
2
3
data={
v1
}

每个v,应该传入如下格式;

1
{key:'键值',value:'相当于option的value',title:'相当于option的text'}

这样通过传入的data,就可以决定最终渲染出来的list是几列了。对于2列及2列以上的,
我们需要构造下“键值”就行,通过_来建立1-2或者1-2-3级关系

1
2
3
4
5
{
"v1":{"key":"3","title":"item3","value":"1item3"},
"v2":{"key":"3_1","title":"item3_1","value":"2item3_1"},
"v3":{"key":"3_1_1","title":"item3_1_1","value":"3item3_1_1"}
}
  • 接收参数

首先利用好componentWillReceiveProps函数,需要在这里接受刚传递过来的items,
组件初始化为5个item,但是当item的数量少于5个的时候,需要给补个空位,让item0处于选中状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if (nextProps.item !== this.props.item && nextProps.value != this.props.value) {
this.setState({item: nextProps.item, value: nextProps.value});
this.data = nextProps.item;
this.initDatas(nextProps.item, nextProps.value); // 补空数据
}
let length = datas.v1.length;
if (Math.floor((length + 1) / 2) <= MIDDLE_INDEX) {
for (let i = 0; i < MIDDLE_INDEX; i++) {
temp.push({key: datas.v1[0].key + '-' + i, value: '', title: ''});
}
}
datas.v1.forEach((v, k)=> {
temp.push(v);
});
if (temp.length < DATE_LENGTH) {
for (let i = 0; i <= DATE_LENGTH - temp.length; i++) {
temp.push({key: datas.v1[0].key + '-' + (DATE_LENGTH - i), value: '', title: ''});
}
}
  • 处理pickeritem

正常处理逻辑如datepicker一样,唯一不一定的地方,当上下滚动遇到空数据的时候,禁止其更新;

  • 选中事件

1、如果点开picker直接点完成,result应该是v1 v2 v3中间索引的值

1
2
3
4
5
6
let item = this.state.item;
result = {
v1: item.v1[MIDDLE_INDEX],
v2: item.v2[MIDDLE_INDEX],
v3: item.v3[MIDDLE_INDEX]
};

2、如果滑动了

未滑动的其它列值为中间索引值,滑动列应该为实时变量值,因为state复制直接取是有延迟的。

1
2
3
4
5
6
7
let data = G_result;
let item = this.state.item;
data = {
v1: data.v1 || item.v1[MIDDLE_INDEX],
v2: data.v2 || (item.v2 ? item.v2[MIDDLE_INDEX] : null),
v3: data.v3 || (item.v3 ? item.v3[MIDDLE_INDEX] : null)
};
  • 回写处理

对于选中的value值,通过调用引用组件的select方法传出,对应的picker组件接收value值,
在pickeritem子组件里,我们根据value的key和item的key进行比较,让其处于中间索引,然后补全前面和后面2个item

  • 样式UI改造

将远css文件改造成sass文件,根据UI设计进行对应的改造

调用方式

1
2
3
4
5
6
7
8
<SelectPicker
item={this.state.pickerdata}
value={this.state.pickerValue}
isOpen={this.state.show}
title="请选择日期"
onSelect={this.handleSelect}
onCancel={this.handleCancel}
/>

效果图

select4
select2
select3

最后

其他细节的代码这里就不啰嗦了,有需要源码一起切磋的可以扫网页下面微我发送,欢迎指点


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^