react+antd带接口搜索的下拉选择

1，使用dropdownRender做输入搜索

dropdownRender={(menu) => (
                <>
                  {menu}
                  <Divider
                    style={{
                      margin: '8px 0',
                    }}
                  />
                  <Space
                    style={{
                      padding: '0 8px 4px',
                    }}
                  >
                    <Input
                      placeholder="请输入搜索内容"
                      // ref={inputRef}
                      // value={name}
                      onChange={onSearchChange}
                      allowClear
                    />
                    <Button type="text" icon={<ZoomInOutlined />} onClick={searchItem}>
                      搜索
                    </Button>
                  </Space>
                </>
              )}

searchItem:

const searchItem=()=>{
        setSelectPage(1)//重置页码为1
        getSelectData(1)//此方法为调接口的方法
      }

onSearchChange：

const onSearchChange=(e)=>{
        setSearchValue(e.target.value);//调接口时将此值作为入参
      }

使用onPopupScroll使鼠标滑到底部时请求下一页数据

onPopupScroll={handPopupScroll}

handPopupScroll:
 

const handPopupScroll=(e)=>{
        const {total}=selectData
        const page=selectPage
        if(Math.ceil(total/10==page)) return 
        e.persist()
        const {target}=e
        if(Math.ceil((target.scrollTop+target.offsetHeight)>=target.scrollHeight)){
          let newPage=page+1
          setSelectPage(newPage)
          getSelectData(newPage)
        }
      }

 2输入时调接口

 使用onSearch

onSearch={(value) => onChangeSelect(value)}

 onChangeSelect：

const onChangeSelect=(value)=>{
          setSelectPage(1)//重置为第一页
          getSelectData(1,value)//调接口方法
      }