react中保存input的搜索记录

要保存搜索记录，你需要将用户的搜索词存储到本地存储（LocalStorage）中。在React中，你可以使用`useState`钩子来管理搜索历史记录数组。每当用户输入搜索词并点击搜索按钮时，将搜索词添加到搜索历史记录数组中，并将其存储到本地存储中。下面是一个示例代码：

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

const SearchBar = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchHistory, setSearchHistory] = useState([]);

  useEffect(() => {
    const history = localStorage.getItem('searchHistory');
    if (history) {
      setSearchHistory(JSON.parse(history));
    }
  }, []);

  const handleSearch = () => {
    if (searchTerm) {
      setSearchHistory([...searchHistory, searchTerm]);
      localStorage.setItem('searchHistory', JSON.stringify([...searchHistory, searchTerm]));
      setSearchTerm('');
    }
  };

  const clearHistory = () => {
    setSearchHistory([]);
    localStorage.removeItem('searchHistory');
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      <button onClick={handleSearch}>Search</button>
      <ul>
        {searchHistory.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={clearHistory}>Clear History</button>
    </div>
  );
};

export default SearchBar;

在这个例子中，我们使用了`useEffect`钩子来读取本地存储中的搜索历史记录，并在组件渲染时初始化搜索历史记录数组。当用户输入搜索词并点击搜索按钮时，我们将搜索词添加到搜索历史记录数组中，并使用`localStorage.setItem`方法将其存储到本地存储中。我们还提供了一个清除搜索历史记录的按钮，当点击该按钮时，我们将搜索历史记录数组清空，并使用`localStorage.removeItem`方法将其从本地存储中移除。