构建一个简单的React待办事项列表应用

简介: 构建一个简单的React待办事项列表应用

在这个教程中,我们将构建一个基于React的待办事项列表应用。这个应用将允许用户添加、编辑和删除待办事项,同时还会显示已完成和未完成的待办事项。我们将使用React Hooks、组件、以及本地状态管理来构建这个应用。


  1. 设置项目

首先,使用create-react-app创建一个新的React项目:

npx create-react-app todo-app
cd todo-app


  1. 创建主要组件

src/components目录下创建TodoList.jsTodoItem.jsTodoForm.js等组件。

TodoList.js (主要组件,展示待办事项列表)

import React, { useState } from 'react';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';
function TodoList() {
  const [todos, setTodos] = useState([]);
  const handleAddTodo = (todoText) => {
    const newTodo = {
      id: Date.now(),
      text: todoText,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };
  const handleToggleTodo = (id) => {
    setTodos(todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)));
  };
  const handleDeleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };
  return (
    <div className="todo-list">
      <h2>待办事项列表</h2>
      <TodoForm onAddTodo={handleAddTodo} />
      <ul>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onToggleTodo={handleToggleTodo}
            onDeleteTodo={handleDeleteTodo}
          />
        ))}
      </ul>
    </div>
  );
}
export default TodoList;

TodoItem.js (待办事项组件)

import React from 'react';
function TodoItem({ todo, onToggleTodo, onDeleteTodo }) {
  return (
    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggleTodo(todo.id)}
      />
      <span className="todo-text">{todo.text}</span>
      <button className="delete-btn" onClick={() => onDeleteTodo(todo.id)}>
        删除
      </button>
    </li>
  );
}
export default TodoItem;

TodoForm.js (待办事项表单组件)

import React, { useState } from 'react';
function TodoForm({ onAddTodo }) {
  const [input, setInput] = useState('');
  const handleInputChange = (e) => {
    setInput(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      onAddTodo(input);
      setInput('');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
        placeholder="添加待办事项"
      />
      <button type="submit">添加</button>
    </form>
  );
}
export default TodoForm;


  1. 添加样式

src目录下创建App.css(或index.css,取决于你的项目设置),并添加以下样式:

/* App.css */
.todo-list {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.todo-list h2 {
  text-align: center;
}
.todo-list ul {
  list-style-type: none;
  padding: 0;
}
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.todo-item.completed {
  color: #999;
  text-decoration: line-through;
}
.todo-item input[type="checkbox"] {
  margin-right: 10px;
}
.todo-item .todo-text {
  flex: 1;
}
.todo-item .delete-btn {
  margin-left: auto;
  background-color: transparent;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 0.8em;
}
.todo-item .delete-btn:hover {
  color: #666;
}
/* 样式可能需要根据具体布局和设计进行调整 */


  1. 集成到App组件

src/App.js中,我们将TodoList组件作为根组件引入并渲染。

import React from 'react';
import './App.css'; // 确保导入了样式文件
import TodoList from './components/TodoList';
function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}
export default App;


  1. 启动项目

回到终端或命令提示符,运行以下命令来启动你的React应用:

npm start

现在,你的待办事项列表应用应该可以在浏览器中运行了。你可以添加新的待办事项,点击复选框来标记它们为已完成,以及点击“删除”按钮来删除待办事项。


  1. 扩展功能
  • 持久化存储:使用localStorage或IndexedDB来保存待办事项,以便在刷新页面或重新打开应用时恢复它们。
  • 拖放排序:允许用户通过拖放来重新排序待办事项。
  • 日期和时间:为每个待办事项添加截止日期或提醒时间。
  • 优先级:添加待办事项的优先级,如高、中、低。
  • 过滤:添加过滤功能,允许用户根据完成状态或优先级来查看待办事项。
  • 响应式设计:确保应用在不同设备和屏幕尺寸上都能良好地工作。


  1. 总结

在这个教程中,我们构建了一个基于React的待办事项列表应用。我们使用了React Hooks、组件、本地状态管理以及CSS样式来构建这个应用。这个应用是一个很好的起点,你可以根据自己的需求进一步扩展和定制它。React的灵活性和可扩展性使得构建复杂的前端应用变得相对简单和高效。

目录
相关文章
|
6天前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
13天前
|
存储 前端开发 JavaScript
深入浅出React框架:构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域,React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统,成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念,并通过实战示例,展示如何利用React构建高效、可维护的组件化网页。
45 8
|
17天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
18 1
|
1月前
|
前端开发 JavaScript Linux
分离前后端react和django3构建的应用
【6月更文挑战第4天】在本文中,我们介绍了如何设置React前端并连接到Django后端。并讨论了前后端分离的好处,并计划扩展API以支持更多HTTP操作和用户身份验证功能。
60 5
分离前后端react和django3构建的应用
|
2月前
|
前端开发 JavaScript API
使用React和GraphQL构建一个简单的博客应用
使用React和GraphQL构建一个简单的博客应用
31 1
|
1月前
|
Python API 前端开发
使用react和django3构建应用
【6月更文挑战第3天】首先,创建Django项目和todos应用,安装必要依赖,配置settings.py并建立数据库模型。通过makemigrations和migrate更新数据库。接着,设置REST_FRAMEWORK的权限为AllowAny,构建API的urls, views, serializers。在todos应用中定义ListTodo和DetailTodo视图,以及TodoSerializer。对于跨域资源共享(CORS),通过django-cors-headers中间件配置白名单。
29 0
|
6天前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
13 1
|
11月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
53 0
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
35 0
|
2月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
43 1

热门文章

最新文章