在React中如何實(shí)現(xiàn)一個(gè)搜索組件支持輸入提示和自動(dòng)完成

要實(shí)現(xiàn)一個(gè)搜索組件支持輸入提示和自動(dòng)完成，可以使用React的useState和useEffect hooks來實(shí)現(xiàn)。首先，需要為搜索框綁定一個(gè)onChange事件，當(dāng)用戶輸入內(nèi)容時(shí)，通過useState hook來更新輸入框的值，并在useEffect hook中處理輸入提示和自動(dòng)完成的邏輯。

下面是一個(gè)簡(jiǎn)單的搜索組件示例：

import React, { useState, useEffect } from 'react';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  useEffect(() => {
    // 模擬異步請(qǐng)求獲取輸入提示
    const fetchSuggestions = async () => {
      // 這里可以使用實(shí)際的接口請(qǐng)求
      const response = await fetch(`https://api.example.com/suggestions?searchTerm=${searchTerm}`);
      const data = await response.json();
      setSuggestions(data);
    };

    if (searchTerm) {
      fetchSuggestions();
    } else {
      setSuggestions([]);
    }
  }, [searchTerm]);

  const handleChange = (e) => {
    setSearchTerm(e.target.value);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleChange} />
      <ul>
        {suggestions.map((suggestion, index) => (
          <li key={index}>{suggestion}</li>
        ))}
      </ul>
    </div>
  );
};

export default Search;

在這個(gè)示例中，當(dāng)用戶在搜索框中輸入內(nèi)容時(shí)，會(huì)觸發(fā)handleChange函數(shù)更新searchTerm的值。然后，useEffect hook會(huì)根據(jù)searchTerm的變化來進(jìn)行異步請(qǐng)求，并將返回的輸入提示數(shù)據(jù)保存在suggestions中。最后，將輸入提示展示在頁面上供用戶選擇。

需要注意的是，示例中的fetchSuggestions函數(shù)是一個(gè)模擬的異步請(qǐng)求，實(shí)際應(yīng)用中需要替換為實(shí)際的接口請(qǐng)求。另外，也可以根據(jù)需求對(duì)搜索組件進(jìn)行定制和優(yōu)化。