如何为React待办事项列表添加搜索功能？

要实现搜索已添加待办事项并仅显示匹配结果，你需要新增搜索状态、处理搜索输入，并基于关键词过滤任务列表，具体步骤如下：

1. 新增搜索状态
   在组件内添加状态用于保存搜索关键词：

const [searchQuery, setSearchQuery] = useState("");

2. 添加搜索输入处理函数
   编写函数更新搜索状态，同时统一转成小写避免大小写匹配偏差：

const handleSearchChange = (e) => {
  setSearchQuery(e.target.value.toLowerCase());
};

3. 实现任务过滤逻辑
   用filter()方法根据搜索关键词过滤任务，同样将任务文本转小写做匹配：

const filteredTasks = task.filter(taskItem => 
  taskItem.toLowerCase().includes(searchQuery)
);

4. 修改渲染逻辑
   渲染任务列表时，使用过滤后的filteredTasks代替原有的task数组。

修改后的完整App组件代码 #

import { useState, useEffect } from "react";

function getLocalItem() {
  let list = localStorage.getItem("lists");
  if (list) {
    return JSON.parse(localStorage.getItem("lists"));
  } else {
    return [];
  }
}

function App() {
  const [text, setText] = useState("Add a task");
  const [task, setTask] = useState(getLocalItem());
  // 新增搜索状态
  const [searchQuery, setSearchQuery] = useState("");

  const changeText = (event) => {
    setText(event.target.value);
  };

  const submitHandler = (event) => {
    console.log("submitted");
    event.preventDefault();
    // 避免添加空任务
    if (text.trim()) {
      setTask([...task, text]);
      setText("");
    }
  };

  const removeTask = (a) => {
    const finalData = task.filter((curEle, index) => {
      return index !== a;
    });
    setTask(finalData);
  };

  // 搜索输入处理函数
  const handleSearchChange = (e) => {
    setSearchQuery(e.target.value.toLowerCase());
  };

  // 过滤任务列表
  const filteredTasks = task.filter(taskItem => 
    taskItem.toLowerCase().includes(searchQuery)
  );

  useEffect(() => {
    localStorage.setItem("lists", JSON.stringify(task));
  }, [task]);

  return (
    <div className="App">
      <h1>Todo List</h1>
      {/* 添加搜索输入框 */}
      <input
        type="text"
        placeholder="搜索任务..."
        value={searchQuery}
        onChange={handleSearchChange}
      />
      <form onSubmit={submitHandler}>
        <input type="text" value={text} onChange={changeText} />
        <button type="submit">Add Task</button>
      </form>
      <div>
        {/* 渲染过滤后的任务 */}
        {filteredTasks.map((curEle, index) => (
          <div key={index}>
            <p>{curEle}</p>
            <button onClick={() => removeTask(index)}>Delete</button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

关键说明 #

• 统一转小写是为了实现不区分大小写的搜索，如果需要严格区分大小写，去掉.toLowerCase()即可。
• 过滤后的filteredTasks是派生状态，无需用useState保存，每次渲染时根据当前task和searchQuery计算即可。
• 之前使用filter()未成功，大概率是没有将过滤结果用于渲染，或是未处理大小写匹配的问题。

内容的提问来源于stack exchange，提问作者Arnav Kashyap