Cascader级联选择
应用于需要进行多级选择的列表场景下 from 0.13.0
代码演示#
/**
* 级联列表属于高度集成组件，业务中如果有用到示例中提供的组件，可直接拷贝代码
* CarModel和Area组件共同调用了srn组件库中的Cascader组件
*
* Cascader.propTypes = {
* //控制每一级是否显示全部选项，级数与数组下标对应
* showAll: PropTypes.arrayOf(PropTypes.bool), // [true, true, true]
* //控制每一级是否隐藏 section，级数与数组下标对应 from 0.18.2
* hideSection: PropTypes.arrayOf(PropTypes.bool), // [true, true, true]
* // 一级是否显示快捷导航 from 0.17.6
* quickNavigation: PropTypes.bool, // false
* //组件内部处理data数据使用promise规范
* //data数组的元素值是一个函数，函数的返回值既可以是一个常量，也可以是一个符合promise规范的网络请求
* //级联列表的层数即为data数组的长度，每一层渲染data数组相应的数据
* //目前最多只支持三层
* data: React.PropTypes.array.isRequired,
* data内部的值也是一个数组，数据结构[{
* section: 'A',
* rows: [{
* code: '01075',
* name: '安徽',
* //以上2个数据为必须数据，此外你还可以传入其他数据，这些数据会在相应的项被选中之后通过onSelected函数返回
* }]
* }]
*
* //每一层的点击都会触发此回调，传入的第一个参数即为当前点击的层数，后面带有可变数量的参数
* //当点击第一层时，第二个参数为第一层点击的数据
* //当前及第二层时，第二个参数为第一层点击的数据，第三个参数为第二层点击的数据
* //当点击第三层时，第二个参数为第一层点击的数据，第三个参数为第二层点击的数据，第四个参数为第三层点击的数据
* //当此函数返回值为 true 时，将不会打开下一个层级
* onSelected: React.PropTypes.func,
* }
*/示例代码与效果
import React from 'react';
import {
StyleSheet,
ScrollView,
InteractionManager
} from 'react-native';
import {
Button,
Modal,
} from '@souche-ui/srn-ui';
import CarModel from './CarModel';
import Area from './Area';
const INIT_STATE = {
visible: false,
title: '',
message: '',
messageAlign: 'center',
options: [{
text: 'OK'
}]
};
class CascadeListExample extends React.Component {
static navigation = {
title: {
text: '级联列表'
}
};
state = INIT_STATE;
constructor(props) {
super(props);
this.selectCarModel = this.selectCarModel.bind(this);
this.showCarModel = this.showCarModel.bind(this);
this.selectArea = this.selectArea.bind(this);
this.showArea = this.showArea.bind(this);
}
selectCarModel(dataArr) {
NavHelper.pop();
dataArr && InteractionManager.runAfterInteractions(() => {
this.setState(Object.assign({}, INIT_STATE, {
visible: true,
title: '车型库',
message: dataArr.map(v => v.name),
options: [{
text: 'OK'
}]
}));
});
}
showCarModel(level) {
this.setState(Object.assign({}, INIT_STATE));
NavHelper.push(CarModel, {
level: level,
selected: this.selectCarModel
});
}
selectArea(dataArr) {
NavHelper.pop();
dataArr && InteractionManager.runAfterInteractions(() => {
this.setState(Object.assign({}, INIT_STATE, {
visible: true,
title: '地区',
message: dataArr.map(v => v.name),
options: [{
text: 'OK'
}]
}));
});
}
showArea(level) {
this.setState(Object.assign({}, INIT_STATE));
NavHelper.push(Area, {
level: level,
selected: this.selectArea
});
}
render() {
return (
<ScrollView style={styles.container}>
<Button style={styles.buttonMargin} onPress={() => this.showCarModel(1)} >车型库品牌</Button>
<Button style={styles.buttonMargin} onPress={() => this.showCarModel(2)} >车型库车系</Button>
<Button style={styles.buttonMargin} onPress={() => this.showCarModel(3)} >车型库车型</Button>
<Button style={styles.buttonMargin} onPress={() => this.showArea(1)} >选择省份</Button>
<Button style={styles.buttonMargin} onPress={() => this.showArea(2)} >选择城市</Button>
<Modal
visible={this.state.visible}
title={this.state.title}
message={this.state.message}
options={this.state.options}
onClose={() => this.setState({ visible: false })}
/>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
buttonMargin: {
marginTop: 16,
marginRight: 16,
marginBottom: 16,
marginLeft: 16
}
});
export default CascadeListExample;
API#
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 数据 | 见代码演示 | - | - |
| onSelected | 选择事件回调，返回 | (level: number, level1Data, level2Data?, level3Data?): boolean | - | - |