React中的简单下拉过滤器？React Hooks

import React, { useState } from 'react';

const SimpleDropdownFilter = () => {
  const [inputValue, setInputValue] = useState('');
  const [filteredOptions, setFilteredOptions] = useState([]);

  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);

    // 根据输入的关键字筛选选项
    const filtered = options.filter(option =>
      option.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredOptions(filtered);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="输入关键字筛选选项"
      />
      <ul>
        {filteredOptions.map((option, index) => (
          <li key={index}>{option}</li>
        ))}
      </ul>
    </div>
  );
};

export default SimpleDropdownFilter;