Hooks + TS 搭建任务管理系统（四）-- 搜索功能的实现

前端

2023-09-15 04:51:07

前言

在上一篇文章中，我们已经完成了任务管理系统的基础功能。在这篇文章中，我们将继续完善任务管理系统，添加一个搜索功能。搜索功能在各个项目中都很常见，它允许用户快速找到所需的信息。

实现搜索功能

1. 设计搜索框

首先，我们需要设计一个搜索框，允许用户输入搜索关键词。搜索框可以放在任务列表的顶部或底部。

2. 创建搜索功能的 Hook

接下来，我们需要创建一个搜索功能的 Hook。这个 Hook 将接受一个搜索关键词作为参数，并返回一个包含搜索结果的任务列表。

3. 使用 Hook 来搜索任务

最后，我们需要在任务列表组件中使用 Hook 来搜索任务。当用户在搜索框中输入关键词时，我们可以调用 Hook 来获取搜索结果，并更新任务列表。

代码示例

// 搜索功能的 Hook
const useSearch = (tasks, keyword) => {
  const results = tasks.filter((task) => {
    return task.title.includes(keyword) || task.description.includes(keyword);
  });

  return results;
};

// 任务列表组件
const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [keyword, setKeyword] = useState('');

  const handleSearch = (e) => {
    e.preventDefault();
    const results = useSearch(tasks, keyword);
    setTasks(results);
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
        <button type="submit">搜索</button>
      </form>

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
};