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

小谂
94 阅读4分钟

使用 React 实现简单的待办事项列表

在这篇博客中，我们将深入探讨如何使用 React 创建一个简单的待办事项列表应用。这个应用将允许用户添加、编辑和删除待办事项。我们将分步骤展示代码实现，并解释每个部分的功能。

1. 环境准备

首先，确保你已经在你的计算机上安装了 Node.js 和 npm。然后，你可以使用 Create React App 快速创建一个新的 React 应用。

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

这将启动一个新的 React 应用并在浏览器中打开。

2. 组件结构

在我们的待办事项应用中，我们将需要以下几个组件：

  • App：主组件，包含状态和逻辑。
  • TodoList：展示待办事项列表。
  • TodoItem：每个待办事项的组件，允许编辑和删除。
  • TodoForm：输入待办事项的表单。

3. 创建基本的 App 组件

打开 src/App.js 文件，并开始编写基本的代码。

import React, { useState } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import './App.css';

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, { id: Date.now(), text: todo, isEditing: false }]);
  };

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

  const editTodo = (id, newText) => {
    setTodos(todos.map(todo => (todo.id === id ? { ...todo, text: newText } : todo)));
  };

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

export default App;

代码解释

  • useState 用于管理待办事项的状态。
  • addTodo 函数用于添加新的待办事项。
  • deleteTodo 函数用于删除指定的待办事项。
  • editTodo 函数用于编辑指定的待办事项。

4. 创建 TodoForm 组件

接下来，我们创建一个表单组件，用于输入新的待办事项。

在 src 文件夹中创建 TodoForm.js 文件，并添加以下代码：

import React, { useState } from 'react';

const TodoForm = ({ addTodo }) => {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!input) return;
    addTodo(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="添加新的待办事项"
      />
      <button type="submit">添加</button>
    </form>
  );
};

export default TodoForm;

代码解释

  • input 状态用于存储用户输入的待办事项。
  • handleSubmit 函数在表单提交时调用，添加新的待办事项并重置输入框。

5. 创建 TodoList 组件

接下来，创建一个组件来展示待办事项列表。

在 src 文件夹中创建 TodoList.js 文件，并添加以下代码：

import React from 'react';
import TodoItem from './TodoItem';

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

export default TodoList;

代码解释

  • TodoList 组件接收待办事项数组以及删除和编辑的函数，并为每个待办事项渲染一个 TodoItem 组件。

6. 创建 TodoItem 组件

最后，创建一个组件来处理每个待办事项的显示和编辑。

在 src 文件夹中创建 TodoItem.js 文件，并添加以下代码：

import React, { useState } from 'react';

const TodoItem = ({ todo, deleteTodo, editTodo }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [newText, setNewText] = useState(todo.text);

  const handleEdit = () => {
    editTodo(todo.id, newText);
    setIsEditing(false);
  };

  return (
    <li>
      {isEditing ? (
        <>
          <input 
            type="text" 
            value={newText} 
            onChange={(e) => setNewText(e.target.value)} 
          />
          <button onClick={handleEdit}>保存</button>
        </>
      ) : (
        <>
          <span>{todo.text}</span>
          <button onClick={() => setIsEditing(true)}>编辑</button>
          <button onClick={() => deleteTodo(todo.id)}>删除</button>
        </>
      )}
    </li>
  );
};

export default TodoItem;

代码解释

  • TodoItem 组件管理每个待办事项的编辑状态。
  • 当用户点击“编辑”按钮时，输入框会出现，用户可以修改待办事项文本。

7. 样式

最后，我们可以为我们的应用添加一些基本的样式。在 src/App.css 文件中添加以下 CSS：

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

form {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  margin-right: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

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

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

样式解释

  • 我们为应用添加了基本的布局和样式，使其更美观和用户友好。

8. 完整代码

在这一部分，你可以将上述所有组件整合在一起，形成一个完整的待办事项列表应用。运行 npm start，你应该能在浏览器中看到并使用这个应用。

9. 未来的改进

我们实现了一个基本的待办事项应用，但还有许多改进的空间：

  • 持久化存储：可以使用 localStorage 保持待办事项在页面重新加载后的状态。
  • 拖拽排序：允许用户重新排序待办事项。
  • 过滤功能：根据完成状态过滤待办事项。

结论

通过这篇博客，我们学习了如何使用 React 创建一个简单的待办事项列表应用。我们从零开始，逐步实现了添加、编辑和删除待办事项的功能。希望你能在此基础上进行更多的自定义和扩展！

avatar
文章
阅读
粉丝