React 可多选查询组件

2024-01-15 08:34:06

如何在 React 中创建类似 Ant Design Select 的可多选查询组件

简介

Ant Design 是一个流行的 React UI 库，其中包含 Select 组件。该组件是一个用于单选和多选的可搜索下拉列表。本文将指导你如何从头开始在 React 中创建一个类似的组件，包括搜索和多选功能。

设置

首先，创建一个新的 React 项目：

npx create-react-app ant-select-clone

安装依赖项：

npm install antd

在 src/App.js 文件中，导入 Select 组件和所需的样式表：

import { Select } from 'antd';
import 'antd/dist/antd.css';

创建自定义组件

接下来，创建一个名为 MultiSelect 的自定义组件。该组件将扩展 Ant Design 的 Select 组件，添加多选和搜索功能。

// src/components/MultiSelect.js

import React, { useState } from 'react';
import { Select, Input, Tag } from 'antd';

const { Option } = Select;

const MultiSelect = () => {
  const [value, setValue] = useState([]);
  const [options, setOptions] = useState([
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]);

  const handleChange = (selectedOptions) => {
    setValue(selectedOptions);
  };

  const handleSearch = (value) => {
    const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(value.toLowerCase()));
    setOptions(filteredOptions);
  };

  return (
    <Select
      mode="multiple"
      value={value}
      onChange={handleChange}
      showSearch
      filterOption={false}
      onSearch={handleSearch}
      placeholder="Select options"
    >
      {options.map((option) => (
        <Option value={option.value} key={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
  );
};

export default MultiSelect;

使用自定义组件

在 App.js 中，导入并使用 MultiSelect 组件：

// src/App.js

import MultiSelect from './components/MultiSelect';

const App = () => {
  return (
    <div className="App">
      <h1>MultiSelect Component</h1>
      <MultiSelect />
    </div>
  );
};

export default App;