antd 的select 使用时,输入内容筛选出含有输入内容的选项

在antd 的select使用时,对于选项过多时可以进行优化,输入内容筛选出符合的选项,为了工作中方便使用,便对select作出了进一步封装,
封装的组件:

import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
import { Select } from 'antd'

const { Option } = Select

interface SelectProps {
  values: string //可传入的值
  onChange: (value: string) => void//回掉方法
  options: any[] //选项
  disabled?: boolean//是否禁用
}

const SearchComponent: React.ForwardRefRenderFunction<any, SelectProps> = (
  { values, onChange, options, disabled, ...rest },
  ref,
) => {
  const [selectedValue, setSelectedValue] = useState<string | undefined>(values)
  const [selectList, setSelectedList] = useState<any[]>(options)

  useEffect(() => {
    setSelectedValue(values)
    setSelectedList(options)
  }, [values, options])

  const handleChange = (value: string) => {
    setSelectedValue(value)
    onChange(value)
  }

  const handleSearch = (value: string) => {
    let newList: any[] = []
    if (!value) {
      newList = [...options]
    } else {
      newList = options.filter((item: any) => item.label.includes(value))
    }
    setSelectedList(newList)
  }

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    clearSelection() {
      setSelectedValue(undefined)
      onChange('')
    },
  }))
  const calculateOptionWidth = (label: string) => {
    // 根据具体需求编写计算逻辑
    // 这里简单示例为每个汉字设置 12px 的宽度
    return label.length * 12
  }
  return (
    <Select
      allowClear
      value={selectedValue}
      style={{ width: '100%' }}
      showSearch
      showArrow={false}
      defaultActiveFirstOption={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      notFoundContent={null}
      disabled={disabled}
      {...rest}
    >
      {!selectList
        ? null
        : selectList.map((item: any, index: number) => (
            //@ts-ignore
            <Option key={index} value={item.value} style={{ width: calculateOptionWidth(item.label) }}>
              {item.label}
            </Option>
          ))}
    </Select>
  )
}

export default forwardRef(SearchComponent)

对于组件的调用

<SearchComponent 
  options={[]} 
  values={dataSourceValue} 
  onChange={dataSourceCall} 
  />

options是父组件传入的选择项
values 是父组件中对应的值
onChange父组件与组件之间的对于values的传递,

各位看的大哥,轻点喷,若有问题,请指出 ,互相交流