在第一部分的基础上,我们将继续构建Todo应用程序,并完成其余的功能。
- 创建一个新的Todo项
首先,我们需要在components/TodoList/NewTodo.tsx
文件中添加一个表单来创建新的Todo项。
在上述代码中,我们使用了Apollo Client的useMutation
钩子来处理创建新Todo的请求。我们还使用了React的useState
钩子来管理输入字段的状态。
- 完成Todo项
在components/TodoList/Todo.tsx
文件中,我们需要添加一个按钮来标记Todo项为已完成。
在上述代码中,我们使用了useMutation
钩子来处理标记Todo为已完成的请求。
- 删除Todo项
在components/TodoList/Todo.tsx
文件中,我们需要添加一个按钮来删除Todo项。
在上述代码中,我们使用了useMutation
钩子来处理删除Todo的请求。
- 清除已完成的Todo项
在components/TodoList/Footer.tsx
文件中,我们