使用 React 实现一个简单的待办事项列表 | 豆包MarsCode AI刷题

用户778319548256
76 阅读4分钟

一、项目准备

使用 Create React App 快速搭建一个新的 React 项目。打开终端或命令提示符，输入以下命令：

bash
npx create-react-app todo-list  
cd todo-list  
npm start

这将创建一个新的 React 应用，并在默认浏览器中打开该应用，可以看到一个基本的欢迎页面。

二、构建应用结构

在我们的待办事项列表中，我们需要构建几个基本功能模块：

  1. 添加新任务
  2. 编辑现有任务
  3. 删除任务
  4. 显示所有任务

为了实现这些功能，我们将创建以下组件：

  • TodoApp：整个应用的主组件，负责状态管理。
  • TodoList：显示待办事项的列表组件。
  • TodoItem：表示每个待办事项的组件。
  • TodoForm：处理输入的表单组件，用于添加和编辑任务。

1. 创建组件结构

在 src 目录下，创建一个新的文件夹 components，然后在里面创建如下文件：

  • TodoApp.js
  • TodoList.js
  • TodoItem.js
  • TodoForm.js

2. 编写主组件 TodoApp

首先，我们在 TodoApp.js 文件中设置应用的状态和需要的函数来添加、编辑和删除任务。

javascript
// src/components/TodoApp.js  
import React, { useState } from 'react';  
import TodoList from './TodoList';  
import TodoForm from './TodoForm';  

const TodoApp = () => {  
  const [todos, setTodos] = useState([]);  
  const [editingTodo, setEditingTodo] = useState(null);  

  const addTodo = (todo) => {  
    setTodos([...todos, todo]);  
  };  

  const deleteTodo = (id) => {  
    setTodos(todos.filter(todo => todo.id !== id));  
  };  

  const startEditing = (todo) => {  
    setEditingTodo(todo);  
  };  

  const editTodo = (updatedTodo) => {  
    setTodos(todos.map(todo => (todo.id === updatedTodo.id ? updatedTodo : todo)));  
    setEditingTodo(null);  
  };  

  return (  
    <div>  
      <h1>待办事项列表</h1>  
      <TodoForm addTodo={addTodo} editingTodo={editingTodo} editTodo={editTodo} />  
      <TodoList todos={todos} deleteTodo={deleteTodo} startEditing={startEditing} />  
    </div>  
  );  
};  

export default TodoApp;

3. 创建待办事项列表组件 TodoList

接下来，创建 TodoList.js 文件，该文件将负责渲染待办事项列表。

javascript
// src/components/TodoList.js  
import React from 'react';  
import TodoItem from './TodoItem';  

const TodoList = ({ todos, deleteTodo, startEditing }) => {  
  return (  
    <ul>  
      {todos.map(todo => (  
        <TodoItem   
          key={todo.id}   
          todo={todo}   
          deleteTodo={deleteTodo}   
          startEditing={startEditing}   
        />  
      ))}  
    </ul>  
  );  
};  

export default TodoList;

4. 创建待办事项项组件 TodoItem

在 TodoItem.js 文件中，展示每个待办事项的内容，并提供编辑和删除按钮。

javascript
// src/components/TodoItem.js  
import React from 'react';  

const TodoItem = ({ todo, deleteTodo, startEditing }) => {  
  return (  
    <li>  
      <span>{todo.text}</span>  
      <button onClick={() => startEditing(todo)}>编辑</button>  
      <button onClick={() => deleteTodo(todo.id)}>删除</button>  
    </li>  
  );  
};  

export default TodoItem;

5. 创建待办事项表单组件 TodoForm

最后，在 TodoForm.js 文件中，创建一个表单，让用户能够输入任务。

javascript
// src/components/TodoForm.js  
import React, { useState, useEffect } from 'react';  

const TodoForm = ({ addTodo, editingTodo, editTodo }) => {  
  const [inputValue, setInputValue] = useState('');  

  useEffect(() => {  
    if (editingTodo) {  
      setInputValue(editingTodo.text);  
    } else {  
      setInputValue('');  
    }  
  }, [editingTodo]);  

  const handleSubmit = (e) => {  
    e.preventDefault();  
    if (editingTodo) {  
      editTodo({ ...editingTodo, text: inputValue });  
    } else {  
      addTodo({ id: Date.now(), text: inputValue });  
    }  
    setInputValue('');  
  };  

  return (  
    <form onSubmit={handleSubmit}>  
      <input   
        type="text"   
        value={inputValue}   
        onChange={(e) => setInputValue(e.target.value)}   
        placeholder="添加新待办事项"  
        required   
      />  
      <button type="submit">{editingTodo ? '更新' : '添加'}</button>  
    </form>  
  );  
};  

export default TodoForm;

三、将组件整合到应用中

所有组件构建完成后，我们只需要在 src/App.js 文件中导入并渲染 TodoApp 组件：

javascript
// src/App.js  
import React from 'react';  
import TodoApp from './components/TodoApp';  

function App() {  
  return (  
    <div className="App">  
      <TodoApp />  
    </div>  
  );  
}  

export default App;

四、美化应用

为了让待办事项列表看起来更美观，我们可以添加一些基本的 CSS 样式。可以在 src/App.css 中添加如下样式：

css
/* src/App.css */  
.App {  
  max-width: 600px;  
  margin: 0 auto;  
  padding: 20px;  
  font-family: Arial, sans-serif;  
}  

ul {  
  list-style: none;  
  padding: 0;  
}  

button {  
  margin-left: 10px;  
}

五、测试和运行应用

完成所有的代码后，确保一切设置无误，然后在你的项目根目录运行以下命令以启动开发服务器：

bash
npm start

打开浏览器，访问 http://localhost:3000，您应该能看到完整的待办事项列表应用，包括添加、编辑和删除任务的功能。

六、个人总结

通过本项目的实践，我对 React 的组件化思想有了更深刻的理解，特别是在状态管理和组件之间的交互方面。待办事项列表虽然是一个简单的应用，但它却涵盖了许多前端开发中的关键概念，如使用状态管理、处理用户输入、事件处理、条件渲染等。

在开发中，我认识到良好的组件结构和清晰的功能分工对于维护大型应用是多么重要。每个组件的职责明确，使得代码易于维护和扩展。通过使用 React 的 hooks 特性 useState 和 useEffect，使得我们可以更高效地管理状态和副作用，这无疑是开发现代 Web 应用的重要工具。

未来，我希望进一步学习和探索 React 的更多功能和生态系统中的其他工具，比如 Redux 用于复杂状态管理，React Router 用于处理路由，以及如何更好地与后端 API 进行交互。这将为我开发更复杂和更具交互性的应用奠定基础。

总之，构建一个简单的待办事项列表让我感到兴奋和满足，它不仅增强了我的开发技能，还让我对如何构建用户友好的应用有了更深刻的理解。希望这篇文章能帮助到同样有兴趣学习 React 的小伙伴们！

avatar
文章
阅读
粉丝