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

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

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

1. 准备工作

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

bash 复制代码
npx create-react-app todo-list-app
cd todo-list-app

2. 编写组件

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

Header组件

jsx 复制代码
// 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 (
      <div className={style.header}>
        <input
          placeholder="What needs to be done?"
          className={style.input}
          value={value}
          type="text"
          onChange={this.handleChange}
          onKeyDown={this.handleEnter}
        />
      </div>
    )
  }
}

TodoList组件

jsx 复制代码
// 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 (
      <div className={style.list}>
        {
          data.map(it => <Item {...it} key={it.id} handleChange={this.handleChange} />)
        }
      </div>
    )
  }
}

Footer组件

jsx 复制代码
// 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 (
      <div className={style.footer}>
        <input type="checkbox" checked={checked} onChange={this.handleCheck} />
        <span className={style.selected}>已完成{completedCount}/全部{data.length}</span>
        <button className={style.button} onClick={this.onClear}>清除已完成任务</button>
      </div>
    )
  }
}

3. 整合组件

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

jsx 复制代码
// 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 (
      <div className={style.todoList}>
        <Header handleAdd={this.handleAdd} />
        <TodoList data={data} handleChange={this.handleChange} />
        <Footer data={data} handleChange={this.handleChange} />
      </div>
    )
  }
}

4. 添加样式

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

5. 运行项目

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

bash 复制代码
npm start

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

参考

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维