面试题：Solid.js条件渲染结合列表在复杂交互场景下的应用

Question

在Solid.js应用中，有一个任务列表，每个任务对象包含`id`、`title`、`completed`等属性。要求实现：1. 条件渲染，根据`completed`属性，将已完成和未完成的任务分别展示在不同的区域；2. 当点击任务标题时，切换任务的完成状态；3. 实现一个搜索框，能根据任务标题搜索并在列表中实时展示匹配的任务。描述实现思路并写出关键代码。

Answer 1

实现思路

1. 条件渲染：遍历任务列表，根据completed属性判断任务是否完成，将完成和未完成的任务分别渲染到不同区域。
2. 切换完成状态：为每个任务标题添加点击事件，在点击时更新任务的completed状态。
3. 搜索功能：监听搜索框输入，根据输入内容过滤任务列表，展示匹配的任务。

关键代码

import { createSignal, onMount } from 'solid-js';

const TaskList = () => {
  const [tasks, setTasks] = createSignal([
    { id: 1, title: '任务1', completed: false },
    { id: 2, title: '任务2', completed: true },
    { id: 3, title: '任务3', completed: false }
  ]);
  const [searchTerm, setSearchTerm] = createSignal('');

  const handleTitleClick = (taskId) => {
    setTasks(t => t.map(task =>
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  const filteredTasks = () => {
    const term = searchTerm().toLowerCase();
    return tasks().filter(task => task.title.toLowerCase().includes(term));
  };

  return (
    <div>
      <input type="text" placeholder="搜索任务"
             onInput={e => setSearchTerm(e.target.value)} />
      <h2>未完成任务</h2>
      <ul>
        {filteredTasks().filter(task =>!task.completed).map(task => (
          <li key={task.id} onClick={() => handleTitleClick(task.id)}>
            {task.title}
          </li>
        ))}
      </ul>
      <h2>已完成任务</h2>
      <ul>
        {filteredTasks().filter(task => task.completed).map(task => (
          <li key={task.id} onClick={() => handleTitleClick(task.id)}>
            {task.title}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;