reactjs自动建议列表与输入分离

import React, { useState } from "react";

const InputComponent = ({ handleInputChange }) => {
  const [inputValue, setInputValue] = useState("");

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

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
};

export default InputComponent;

import React from "react";

const AutoSuggestComponent = ({ suggestions }) => {
  return (
    <ul>
      {suggestions.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default AutoSuggestComponent;

import React, { useState } from "react";
import InputComponent from "./InputComponent";
import AutoSuggestComponent from "./AutoSuggestComponent";

const ParentComponent = () => {
  const [suggestions, setSuggestions] = useState([]);

  const handleInputChange = (value) => {
    // 这里可以使用数据请求或算法来获取与输入内容相关的建议选项
    const newSuggestions = []; // 根据输入内容获取的建议选项数组
    setSuggestions(newSuggestions);
  };

  return (
    <div>
      <InputComponent handleInputChange={handleInputChange} />
      <AutoSuggestComponent suggestions={suggestions} />
    </div>
  );
};

export default ParentComponent;