zent
Version:
一套前端设计语言和基于React的实现
139 lines (129 loc) • 2.43 kB
Markdown
order: 7
zh-CN:
title: 异步搜索
zj: 浙江省
hz: 杭州市
xh: 西湖区
yh: 余杭区
wz: 温州市
lw: 龙湾区
xj: 新疆维吾尔自治区
be: 博尔塔拉蒙古自治州
al: 阿拉山口市
en-US:
title: Async Searchable Usage
zj: Zhejiang
hz: Hangzhou
xh: Xihu
yh: YuHang
wz: Wenzhou
lw: Longwan
xj: Xinjiang
be: Bortala
al: Alashankou
```js
import { MenuCascader } from 'zent';
import { clone, insertPath } from 'zent/es/cascader/public-options-fns';
class Simple extends React.Component {
state = {
value: [],
options: [
{
value: '330000',
label: '{i18n.zj}',
children: [
{
value: '330100',
label: '{i18n.hz}',
children: [
{
value: '330106',
label: '{i18n.xh}',
},
{
value: '330107',
label: '{i18n.yh}',
},
],
},
{
value: '330200',
label: '{i18n.wz}',
children: [
{
value: '330206',
label: '{i18n.lw}',
disabled: true,
},
],
},
],
},
{
value: '120000',
label: '{i18n.xj}',
children: [
{
value: '120100',
label: '{i18n.be}',
children: [
{
value: '120111',
label: '{i18n.al}',
},
],
},
],
},
],
};
onChange = (value, selectedOptions, meta) => {
console.log(value, selectedOptions, meta);
this.setState({
value,
});
};
asyncFilter = keyword =>
new Promise((resolve, reject) => {
setTimeout(() => {
const searchList = [
[
{ value: '330000', label: '浙江省' },
{ value: '330100', label: '杭州市' },
{ value: '330101', label: `${keyword}-1` },
],
[
{ value: '330000', label: '浙江省' },
{ value: '330200', label: '温州市' },
{ value: '330201', label: `${keyword}-2` },
],
];
// insert into options if missing
const options = clone(this.state.options);
searchList.forEach(path => insertPath(options, path));
this.setState({
options,
});
resolve(searchList);
}, 500);
});
render() {
return (
<MenuCascader
value={this.state.value}
options={this.state.options}
onChange={this.onChange}
expandTrigger="hover"
asyncFilter={this.asyncFilter}
clearable
searchable
async
multiple
/>
);
}
}
ReactDOM.render(<Simple />, mountNode);
```