UNPKG

zent

Version:

一套前端设计语言和基于React的实现

139 lines (129 loc) 2.43 kB
--- 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); ```