ant design 下拉框 动态数据 代码示例

Ant Design 下拉框（Select）组件可以通过 `options` 属性来设置静态数据，也可以通过 `onChange` 属性来监听下拉框选中值变化的事件。当需要动态加载数据时，可以通过 `onSearch` 事件来触发异步请求，动态获取数据并更新下拉框的选项列表。

以下是一个动态加载数据的代码示例：

import { Select } from 'antd';
import { useState } from 'react';

const { Option } = Select;

const DynamicSelect = () => {
  const [options, setOptions] = useState([]);

  const handleSearch = (value) => {
    // 模拟异步请求数据
    setTimeout(() => {
      const data = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' },
      ].filter((option) => option.label.toLowerCase().includes(value.toLowerCase()));
      setOptions(data);
    }, 500);
  };

  return (
    <Select
      showSearch
      onSearch={handleSearch}
      style={{ width: 200 }}
      placeholder="Select a fruit"
      filterOption={false}
    >
      {options.map((option) => (
        <Option key={option.value} value={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
  );
};

export default DynamicSelect;

在上面的代码示例中，定义了一个 `DynamicSelect` 组件，通过 `useState` 钩子来定义了一个状态变量 `options`，用于存储下拉框的选项列表数据。在 `handleSearch` 函数中模拟了异步请求数据的过程，返回了一个包含三个水果信息的数组，并根据用户输入的关键字筛选出符合条件的选项。在渲染组件时，使用 `options` 数组的 `map` 方法来动态渲染下拉框的选项列表。当用户输入关键字时，会触发 `onSearch` 事件，调用 `handleSearch` 函数来更新下拉框的选项列表数据。最终实现了一个动态加载数据的下拉框组件。