过滤出React中的下拉值

import React, { useState } from 'react';

const DropdownFilter = () => {
  // 所有的下拉选项值
  const options = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];

  // 过滤后的下拉值
  const [filteredOptions, setFilteredOptions] = useState(options);

  // 处理下拉列表的onChange事件
  const handleFilterChange = (event) => {
    const filterValue = event.target.value.toLowerCase();
    const filtered = options.filter((option) =>
      option.toLowerCase().includes(filterValue)
    );
    setFilteredOptions(filtered);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="过滤条件"
        onChange={handleFilterChange}
      />
      <select>
        {filteredOptions.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
};

export default DropdownFilter;