Dropdown 在 overlay添加搜索功能

首先展示对应效果 下面是funtion 组件实现的代码

export const OfficeMenu = function OfficeMenu({ wardMap, handleSelectWard }) { const [wardList, setWardList] = useState([]); const [initWardList, setInitWardList] = useState([]); useEffect(() =>

{

const wardList = []; for (let key in wardMap) { let obj = { ch: key, list: wardMap[key] }; wardList.push(obj); } setWardList(wardList); setInitWardList(deepClone(wardList)); }, []);

const onSearchWard = key => { let newWardList = []; initWardList.map(wardObj => { const wardNameList = []; wardObj.list.map(ward => { if (ward.wardName.indexOf(key) != -1) { wardNameList.push(ward); } }); if (wardNameList.length) { newWardList.push({ ch: wardObj.ch, list: wardNameList }); } }); setWardList(newWardList); }; return (

选择科室

<Search className={style.search} allowClear placeholder=“搜索科室” onChange={e => { onSearchWard(e.target.value); }} />

{wardList.map((wardMap, index) => { return (

{wardMap.ch}

{wardMap.list.map((ward, wIndex) => { return ( <a onClick={() => handleSelectWard(ward)} key={wIndex}> {ward.wardName});})}); })} ); };

 <Dropdown
   overlay={
          <OfficeMenu
            wardMap={wardMap}
            handleSelectWard={this.handleSelectWard}
          />
        }
        trigger={['click']}
        onVisibleChange={bool =>
          this.setState({ wardSelectVisible: bool })
        }
        visible={wardSelectVisible}
        placement="bottomLeft"
      >
        <div className={style.officeName}>
          {currentWard.wardName}
          <Icon type="down" className="am-ml-5" />
        </div>
 </Dropdown>