当用户点击输入字段时，在react中动态显示列表

import React, { useState } from 'react';

const AutoComplete = () => {
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

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

    // 根据输入值获取匹配的建议列表
    const matchedSuggestions = getSuggestions(value);
    setSuggestions(matchedSuggestions);
  };

  const getSuggestions = (value) => {
    // 根据输入值从后端或本地数据源获取匹配的建议列表
    // 这里可以使用任何后端或本地数据源，例如数据库、API等
    // 返回一个包含建议项的数组
    // 示例：假设建议列表为 ['Apple', 'Banana', 'Orange']
    return ['Apple', 'Banana', 'Orange'].filter((item) =>
      item.toLowerCase().includes(value.toLowerCase())
    );
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="输入字段"
      />
      <ul>
        {suggestions.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default AutoComplete;