react antd select支持下拉搜索

最新推荐文章于 2024-10-13 16:31:55 发布

原创最新推荐文章于 2024-10-13 16:31:55 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

该代码展示了一个ReactSelect组件的使用，包括搜索过滤功能，允许清除选择，以及对部门源的映射处理。filterOption函数用于匹配输入值与选项的值或标签，实现搜索筛选。Select组件则绑定了onChange、onSearch和onBlur事件处理函数，并设置了占位符和选项数据。

  // 过滤方法
const filterOption = (input: string, option: { value: any; label: any; }) => {
  const { value, label } = option;
  return (
    value?.toLowerCase().indexOf(input.toLowerCase()) >= 0
     || label?.toLowerCase().indexOf(input.toLowerCase()) >= 0
  );
  }
 //下拉搜索框
<Select
        allowClear
        showSearch
        // showArrowf
        placeholder="请选择"
        onChange={changeHandle}
        onSearch={searchHandle}
        onBlur={blurHandle}
              options={department?.map((item: { sourceName: any; sourceCode: any; }) => ({ label: item?.sourceName, value: item?.sourceCode }))}

      >
      </Select>