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

清都
117 阅读5分钟

项目准备

  1. 安装 Node.js确保安装了 Node.js 的稳定版本。
  2. 安装包管理器：安装npm或 yarn

可以通过一下代码来检验电脑中是否具备相关配置

node -v
npm -v

项目实例

要在 React 中实现一个简单的待办事项列表，用户可以添加、编辑和删除待办事项，我们需要创建一个基本的 React 项目，然后实现以下功能：

1.创建一个新的待办事项

2.编辑待办事项

3.删除待办事项

文件结构：

这个项目包含以下文件：

  • index.html: HTML 文件，包含基本的 HTML 结构和样式。
  • index.css: CSS 文件，包含基本的样式。
  • App.js: React 组件文件，包含整个待办事项列表的逻辑。
  • TodoForm.js: React 组件文件，用于添加新的待办事项。
  • TodoItem.js: React 组件文件，用于渲染单个待办事项。
  1. 项目依赖：

这个项目使用以下依赖：

  • React：用于构建用户界面的 JavaScript 库。
  • react-dom：用于将 React 组件渲染到 DOM 的库。
  • axios：用于发送 HTTP 请求的库。

这些依赖在 package.json 文件中定义。

  1. React 组件：

这个项目包含三个 React 组件：

  • App.js：应用程序的主要组件，包含待办事项列表、添加待办事项表单和组件逻辑。
  • TodoForm.js：用于添加新的待办事项。
  • TodoItem.js：用于渲染单个待办事项。

这些组件使用 React Hooks 和函数组件实现。

实现示例：

1.在src 目录中创建一个名为 TodoItem.js 的文件，并添加以下代码：

import React, { useState } from 'react';

function TodoItem({ todo, onDelete, onUpdate }) {
  return (
    <li>
      <input type="checkbox" checked={***pleted} onChange={() => onUpdate(todo.id, { completed: !***pleted })} />
      <input
        type="text"
        value={todo.text}
        onChange={(event) => onUpdate(todo.id, { text: event.target.value })}
      />
      <button type="button" onClick={() => onDelete(todo.id)}>删除</button>
    </li>
  );
}

export default TodoItem;

TodoItem 组件接受一个 todo 对象，用于渲染待办事项。它还接受两个回调函数 onDelete 和 onUpdate，用于删除和更新待办事项。

在src 目录中创建一个名为 TodoForm.js 的文件，并添加以下代码：

import React, { useState } from 'react';

function TodoForm({ onAdd }) {
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    onAdd(text);
    setText('');
  };

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

export default TodoForm;

TodoForm 组件包含一个输入框和一个提交按钮。当用户提交表单时，onAdd 回调函数会被调用，用于将输入的文本添加到待办事项列表中。

在 src 目录下创建一个名为 App.css 的文件,实现以下功能：

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

li {
  margin-bottom: 0.5rem;
}

button {
  background-color: crimson;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

4.在 src 目录下创建一个名为 App.js 的文件,实现以下功能：

import React, { useState } from 'react';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

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

  // 添加待办事项
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  // 更新待办事项
  const updateTodo = (id, updatedTodo) => {
    setTodos(todos.map((todo) => (todo.id === id ? updatedTodo : todo)));
  };

  // 删除待办事项
  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <form>
        <TodoForm onAdd={addTodo} />
      </form>
      <ul>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={() => deleteTodo(todo.id)}
            onUpdate={(updatedText) => updateTodo(todo.id, { text: updatedText })}
          />
        ))}
      </ul>
    </div>
  );
}

export default App;
  1. 修改 src/index.css 文件，添加以下样式：
css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

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

li {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}

button {
  background-color: crimson;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

这个项目包含基本的样式，包括待办事项列表，表单和基本布局和样式。

修改 src/index.js 文件，导入 ReactDOM 和 App，并使用 ReactDOM.render 将 App 组件渲染到 DOM 中：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

运行项目：

npm start

主要逻辑

App.js 组件包含以下逻辑：
  • 状态：使用 useState Hook 声明 todos 状态变量，用于存储待办事项。
  • 添加待办事项：当用户提交待办事项表单时，addTodo 函数会被调用，将新的待办事项添加到 todos 状态变量中。
  • 删除待办事项：当用户点击待办事项右侧的删除按钮时，deleteTodo 函数会被调用，将待办事项从 todos 状态变量中删除。
  • 更新待办事项：当用户编辑待办事项时，updateTodo 函数会被调用，使用新的文本更新待办事项。
TodoForm.js 组件包含以下逻辑：
  • 状态：使用 useState Hook 声明 text 状态变量，用于存储用户输入的文本。
  • 提交表单：当用户提交表单时，onAdd 函数会被调用，将新的待办事项添加到 todos 状态变量中。
TodoItem.js 组件包含以下逻辑：
  • 渲染：根据传入的 todo 对象渲染待办事项。
  • 删除待办事项：当用户点击待办事项右侧的删除按钮时，调用 onDelete 函数，将待办事项从 todos 状态变量中删除。
  • 更新待办事项：当用户编辑待办事项时，调用 onUpdate 函数，使用新的文本更新待办事项。

总结

在这个简单的实践项目里，我们使用 React 构建了一个简单的待办事项列表应用。通过这篇文章我们可以了解到React 的一些基本概念和用法，包括组件、属性、状态和事件。并且知道怎样使用 React Hooks（如 useState）管理组件状态。以及如何在本地存储中保存待办事项数据，并在页面刷新后恢复数据。当然了，这个待办事项列表示例只包含一些基本的功能，它只是为了增进我们对React的理解而进行练手的小作业。然而，实际项目中，我们的需求远比这多得多，复杂的多，例如多人实时协作，用户认证和授权，自定义视图，搜索，分类等。所以，我们要继续学习和拓展，以应对工作中层出不穷的难题。

avatar
文章
阅读
粉丝