基于react antd实现左侧菜单快捷搜索直接跳转指定页面

效果展示：

代码实现：

import React, { PureComponent, Suspense } from 'react';
import router from 'umi/router';
import { Layout, Select } from 'antd';
import PinYinMatch from 'pinyin-match';

const { Sider } = Layout;
const { Option } = Select;

export default class SiderMenu extends PureComponent {

  getMenuOption = (menusData) => {
    if (!menusData) {
      return [];
    }
    return menusData
      .filter(item => item.menuName)
      .map(item => this.getSubMenuOrItem(item))
      .filter(item => item);
  };

  getSubMenuOrItem = item => {
    if (item.children) {
      return this.getMenuOption(item.children);
    }
    return <Option value={item.path} key={item.path} title={item.menuName}>{item.menuName}</Option>;
  };

  onMenuSelect = (val) => {
    if (val) router.push(val);
  }

  render() {
    const { menuData } = this.props;
    return (
      <Sider>
        <Suspense fallback={<PageLoading />}>
          <div>
            <Select
              showSearch
              value={undefined}
              style={
   
   { width: 200 }}
              placeholder="使用字母或文字快捷搜索"
              onChange={this.onMenuSelect}
              filterOption={(inputValue, option) => {
                const reg = new RegExp(inputValue, 'i');
                const qs = option.props.title || '';
                if (PinYinMatch.match(qs, inputValue)) {
                  return true;
                }
                if (qs && reg.test(qs)) return true;
                return false;
              }}
            >
              {this.getMenuOption(menuData)}
            </Select>
          </div>
        </Suspense>
      </Sider>
    );
  }
}