antd设置select支持输入和选择功能

原创已于 2024-08-20 10:55:49 修改 · 6.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2021-08-21 15:21:55 首次发布

React 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用Ant Design (AntD) 的Select组件实现支持输入和搜索的功能，并提供了一个封装好的示例代码。该组件允许用户通过输入进行选项过滤，并支持自定义图标及清除选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我封装的一个select代码，直接拿过去就可以用了

import React, { MutableRefObject } from 'react'
import { Select } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Option } = Select;

export interface SelectProps {
  value: string;
  setSearchOpt: any[];
  onChangeHandl: (value: any) => void;
  onSearch: (value: any) => void;
  valueRef: MutableRefObject<{ value: string; }>
  formSetValue: (value: string) => void;
  onClear: () => void;
}

const SelectSearch: React.FC<SelectProps> = (props) => {
  return <>
    <Select
      showSearch // 使用单选模式可搜索
      value={props.value} // 选中当前条目，多选返回数组
      placeholder={''} // select默认展示的说明
      defaultActiveFirstOption={false} // 是否默认高亮第一个选项
      filterOption={false} // 是否根据输入项进行筛选
      onSearch={props.onSearch} // “文本框值”变化时的回调
      onChange={props.onChangeHandl} // 选中option，或input的value回调
      notFoundContent={null} // 当下拉列表为空时，显示的内容
      allowClear // 是否支持清除
      suffixIcon={<UserOutlined />} // 自定义的选择框后缀的图标
      onBlur={() => {
        console.log(props)
        // props.valueRef.current.value
        props.formSetValue('')
      }}
      onClear={props.onClear}
    >
      {
        props.setSearchOpt.map((item: any) => {
          return <Option key={item.value} value={item.value}>{item.name}</Option>
        })
      }
    </Select>
  </>
}

export default SelectSearch

使用：
注：实际上我项目中我针对表单的Form.item是做了封装的，所以以下示例针对看我博客的朋友能更快速的理解，所以做了简化的示例，如有不到之处，可以指出，我会进行说明修改的。

/**
 * 使用select组件页面
 */
import { Form } from 'antd'
import SelectSearch from './SelectSearch'
import { useRef, useState } from 'react'
/**
 * 模拟数据
 */
const data = [
  {
    value: 1,
    name: 'aaa'
  },
  {
    value: 2,
    name: 'bbb'
  },
  {
    value: 3,
    name: 'ccc'
  },
]

const UseSelect: React.FC = () => {

  // 这个是在失去焦点后，select框内的数据就会消失，value就是空，select框无数据，所以这个最后通过form设置值的方法来解决这个问题
  const valueRef = useRef({ value: '' })

  const [searchOpt, setSearchOpt] = useState(data)

  const [searchVal, setSearchVal] = useState('')
  const [form] = Form.useForm()

  const formSetValue = (value?: string) => {
    if(value) {
      valueRef.current.value = value
    }
    console.log(valueRef.current.value)
    form.setFieldsValue({username: valueRef.current.value})
    setSearchVal(valueRef.current.value) // 这个是进行select输入信息后进行回显的
  }

  /**
   * 清除select
   */
  const onClear = () => {
    console.log('is clear here?')
    form.resetFields();
    valueRef.current.value = ''
    formSetValue()
  }

  return <>
      <Form form={form} name="dynamic_rule">
        <Form.Item
          name="username"
          label="Name"
          rules={[
            {
              required: true,
              message: 'Please input your name',
            },
          ]}
        >
          <SelectSearch
            value={searchVal}
            setSearchOpt={searchOpt}
            valueRef={valueRef}
            onChangeHandl={(value: any)=> {
              const findData = data.find(item => item.value === value)?.name || ''
              formSetValue(findData)

            }}
            onSearch={(value: any) => { // 需要搜索时输入的内容
              formSetValue(value || '')

              setSearchOpt((item) => item.filter(ele => ele.name.includes(value))) // 我的功能需求：用户在这里输入信息后，需要调接口进行进行获取Option内容的数据
            }}
            formSetValue={formSetValue}
            onClear={onClear}
          />
        </Form.Item>
      </Form>
  </>
}

export default UseSelect