react-hook手动封装可搜索远程数据的搜索框

废话不多说，直接上代码！！！

import React, { useState, useRef } from 'react'
import { SearchOutlined } from '@ant-design/icons'
import './styles.less'

const arr = [ // 模拟数据
  { id: 0, name: '张三15324680666' },
  { id: 1, name: '李四13603885241' },
  { id: 2, name: '王五18939752514' },
  { id: 3, name: '王珊15525242514' },
  { id: 4, name: '刘振19852524868' },
  { id: 5, name: '王啊15525242514' },
  { id: 6, name: '王我15525242514' },
  { id: 7, name: '王屙15525242514' },
  { id: 8, name: '王去15525242514' },
]

export default function Test() {

  const putEle = useRef() // 获取输入框元素
  const [iconS, setIconS] = useState(false) // 搜索按钮的显示隐藏状态
  const [openS, setOpenS] = useState(false) // 数据列表的状态
  const [data, setData] = useState([]) // 搜索完之后的数据存放
  const [enterI, setEnterI] = useState(null) // 鼠标移入数据列表

  const putEnter = () => setIconS(true)

  const putLeave = () => { setIconS(false), setOpenS(false) }

  const searchClick = () => { // 点击搜索
    let value = putEle.current.value
    if (value) {
      const itemArr = []
      arr.forEach(v => {
        if (v.name.indexOf(value) != -1) {
          itemArr.push(v)
        }
      })
      setData(itemArr)
      setOpenS(true)
    } else { setOpenS(false) }
  }
  
  const itemStylesAdd = (index) => setEnterI(index) // 数据列表划过添加样式

  const itemClick = (value) => {
    putEle.current.value = value
    setOpenS(false)
    setData([])
  }

  const TextLeave = () => setEnterI(-1)

  return (
    <div className="pages-test">
      <div onMouseEnter={putEnter} onMouseLeave={putLeave} className="input-box">
        <input type="text" ref={putEle} />
        {openS ? <div onMouseLeave={TextLeave} className="sourse-text">
          {
            data.length ? data.map((v, i) => {
              return (
                <div
                  key={i}
                  className={enterI === i ? "data-item itemStyle" : "data-item"}
                  onMouseEnter={() => { itemStylesAdd(i) }}
                  onClick={() => { itemClick(v.name) }}
                >
                  {v.name}
                </div>
              )
            }) : <div className="not-found">不好意思，没有搜索结果</div>
          }
        </div> : null}
        {iconS ? <SearchOutlined onClick={searchClick} /> : null}
      </div>
    </div>
  )
}

样式代码

.pages-test {
  .input-box {
    width: 200px;
    display: inline-block;
    position: relative;
    input {
      width: 200px;
      height: 32px;
      border: 1px solid #D9D9D9;
      border-radius: 3px;
      padding-left: 5px;
    }
    .sourse-text {
      width: 200px;
      height: 150px;
      background: white;
      border: 1px solid #D9D9D9;
      position: absolute;
      bottom: -150px;
      overflow: auto;
      .data-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        cursor: pointer;
      }
      .itemStyle {
        background: #C8E0F0;
      }
      .not-found {
        text-align: center;
        line-height: 140px;
      }
    }
    .anticon-search {
      position: absolute;
      right: 3%;
      top: 15%;
      font-size: 22px;
      cursor: pointer;
    }
  }
}


/*滚动条样式*/

::-webkit-scrollbar {

  /*滚动条整体样式*/
  
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  
  height: 4px;
  
  }
  
  ::-webkit-scrollbar-thumb {
  
  /*滚动条里面小方块*/
  
  border-radius: 5px;
  
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  
  background: rgba(0, 0, 0, 0.2);
  
  }
  
  ::-webkit-scrollbar-track {
  
  /*滚动条里面轨道*/
  
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  
  border-radius: 0;
  
  background: rgba(0, 0, 0, 0.1);
  
  }