React -how检查待办事项列表中的项目？

import React from 'react';

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

function TodoItem({ todo }) {
  const handleCheckboxChange = () => {
    // 处理待办事项的复选框变化事件
  };

  return (
    <li>
      <input type="checkbox" checked={todo.completed} onChange={handleCheckboxChange} />
      <span>{todo.title}</span>
    </li>
  );
}

// 使用示例
const todos = [
  { id: 1, title: '任务1', completed: false },
  { id: 2, title: '任务2', completed: true },
  { id: 3, title: '任务3', completed: false },
];

function App() {
  return (
    <div>
      <h1>待办事项列表</h1>
      <TodoList todos={todos} />
    </div>
  );
}

export default App;