• 构建React TodoList应用:管理你的任务清单


    构建React TodoList应用:管理你的任务清单

    在日常生活和工作中,任务管理是一项至关重要的任务。为了更好地组织和管理我们的工作和生活,我们需要一个高效而简单的任务管理工具。本文将介绍如何使用React框架构建一个功能丰富的TodoList应用,帮助你轻松管理任务清单。
    在这里插入图片描述

    1. 准备工作

    在开始之前,确保你已经安装了Node.js和npm,并创建了一个新的React项目。你可以使用以下命令初始化一个新的React项目:

    npx create-react-app todo-list-app
    cd todo-list-app
    
    • 1
    • 2

    2. 编写组件

    我们将应用分为三个主要组件:Header、TodoList和Footer。Header用于添加新任务,TodoList用于展示任务列表,Footer用于显示任务统计信息和清除已完成任务。

    Header组件

    // Header组件
    import React, { Component } from 'react'
    import style from './Header.module.css'
    
    export default class Header extends Component {
      state = { value: '' }
    
      handleChange = (e) => {
        this.setState({ value: e.target.value })
      }
    
      handleEnter = (e) => {
        if (e.key === 'Enter') {
          this.props.handleAdd(this.state.value)
          this.setState({ value: '' })
        }
      }
    
      render() {
        const { value } = this.state
    
        return (
          
    ) } }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    TodoList组件

    // TodoList组件
    import React, { Component } from 'react'
    import Item from '../TodoItem'
    import style from './TodoList.module.css'
    
    export default class TodoList extends Component {
      handleChange = (item) => {
        const { data } = this.props;
        const newData = data.map(it => it.id === item.id ? item : it);
        this.props.handleChange(newData);
      }
    
      render() {
        const { data } = this.props;
    
        return (
          
    { data.map(it => ) }
    ) } }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    Footer组件

    // Footer组件
    import React, { Component } from 'react'
    import style from './Footer.module.css'
    
    export default class Footer extends Component {
      state = {
        checked: false
      }
    
      onClear = () => {
        const { data } = this.props;
        const newData = data.filter(it => !it.checked);
        this.props.handleChange(newData);
        this.setState({ checked: false });
      }
    
      handleCheck = (e) => {
        const checked = e.target.checked;
        const { data } = this.props;
        let newData = data.map(it => ({ ...it, checked }));
        this.props.handleChange(newData);
        this.setState({ checked });
      }
    
      render() {
        const { checked } = this.state;
        const { data } = this.props;
        const completedCount = data.filter(it => it.checked).length;
    
        return (
          
    已完成{completedCount}/全部{data.length}
    ) } }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    3. 整合组件

    在App.js中导入并使用Header、TodoList和Footer组件,并实现添加任务、更新任务和清除已完成任务的功能。

    // App.js
    import React, { Component } from 'react'
    import Header from './components/Header'
    import TodoList from './components/TodoList'
    import Footer from './components/Footer'
    import style from './App.module.css'
    
    const initialTodos = [
      { id: 'bv2LBfNfFl', value: 'React', checked: false },
      { id: 'tBrIBgKu4l', value: '你好', checked: true },
      { id: '9FXIFbKJ69', value: 'Vue', checked: false },
    ];
    
    export default class TodoListApp extends Component
    
     {
      state = {
        data: initialTodos,
      }
    
      handleAdd = (value) => {
        const { data } = this.state
        this.setState({ data: [{ id: generateRandomString(), value, checked: false }, ...data] })
      }
    
      handleChange = (data) => {
        this.setState({ data });
      }
    
      render() {
        const { data } = this.state;
    
        return (
          
    ) } }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    4. 添加样式

    使用CSS模块化的方式为每个组件添加样式,保持组件之间的样式隔离性,避免样式冲突。

    5. 运行项目

    运行项目并在浏览器中查看TodoList应用,验证功能是否正常。

    npm start
    
    • 1

    通过以上步骤,我们成功地使用React框架构建了一个功能丰富的TodoList应用,实现了任务的添加、更新和清除功能,为我们的任务管理提供了便捷的解决方案。

    参考

  • 相关阅读:
    Spring基础——Spring配置Mybatis连接数据库
    django restframework 中使用throttle进行限流
    关于log4j安全漏洞以及版本替换的记录
    婴幼儿牛奶蛋白过敏危害多,教你四招早期预防
    java开发常用的工具以及配置类
    靶机练习: Hacker_Kid-v1.0.1
    路由懒加载以 及 axios进阶用法
    深度学习数据集的文本制作和读取
    c语言文件操作(9000字详解!!!)
    zero_damaged_pages 隐含参数,处理磁盘页损坏(先占位)
  • 原文地址:https://blog.csdn.net/huangjuan0229/article/details/136224373