使用React 实现一个简单的待办事项列表 | 青训营

etheral
72 阅读2分钟

在日常的工作与生活中，我们经常需要创建一个待办事项列表，以便跟踪我们需要完成的任务。这篇文章将展示如何使用React的Hooks和函数式组件来实现一个基本的待办事项列表(TodoList)。我将一步步带你实现以下功能：新增、删除和编辑待办事项，也就是增删改查(CRUD)。

项目搭建

初始化组件

首先，我们需要创建一个React函数式组件。在这个组件中，我们将使用React的useState hook来管理待办事项列表的状态。

const [todos, setTodos] = useState<string[]>([])

添加功能

接下来，我们将实现添加新的待办事项的功能。当用户点击“添加”按钮时，我们将向待办事项列表中添加一个新的空项。

const [newTodo, setNewTodo] = useState('');
const handleAdd = (input: string) => setTodos([...todos, input])

删除功能

然后，我们将实现删除待办事项的功能。当用户点击待办事项旁边的“删除”按钮时，我们将从待办事项列表中删除该项。

const handleDelete = (index: number) => {
    setTodos(todos.filter((_, index2) => index2 !== index))
}

编辑功能

最后，我们将实现编辑待办事项的功能。当用户点击待办事项旁边的“编辑”按钮时，我们将弹出一个对话框让用户输入新的待办事项内容，并更新列表。

const handleEdit = () => {
    setVisible(true)
}
const handleConfirm = (index: number, newValue: string) => {
    const newTodos = [...todos];
    newTodos[index] = newValue;
    setTodos(newTodos);
}
const handleCancel = () => {
    setVisible(false)
}

最终效果

最终效果如下图： 最终效果

复盘总结

在青训营学习React的过程中，我感受到了hooks的便捷性与灵活性，在此之前我只在vue2中使用过与hooks类似的mixins，但是，相比于mixins，hooks可以更好地复用状态，内部的变量在闭包内，返回的变量支持定义别名，不用担心重名和覆盖种种问题，而且代码高度聚合，可阅读性提升，随之而来是效率提升，bug变少。 此外，hooks写法直接告别了class类组件中使用this带来的种种问题，比如.bind(this)，大大减轻了开发者的心智负担。 在之后的开发过程中，我会进一步将TodoList中的各项todo拆分成一个单独的组件TodoItem，以更好地扩展todo的功能，缩小粒度，减轻开发与维护的心智负担。

备注

本篇文章是我在字节跳动青训营中学习的基础上所编写的，所展示的例子较为简陋，只能抛砖引玉，希望各位大佬不吝赐教。

avatar
文章
阅读
粉丝