React实现Todolist

☞ GitHub项目地址
☞ 项目体验地址

效果图

基本思路

脚手架创建React应用

拆分组件

1. Header组件：包含输入框
2. List组件：Item组件的容器
3. Item组件：包含checkbox、待办事项、
4. Footer组件：显示项目选择情况、清空已完成项、清空所有项目
5. App组件：作为容器，放以上的组件

组件之间通信

• 父子之间
  • 父组件 -> 子组件：直接通过 props 传值
  • 子组件 -> 父组件：在父组件设置处理的函数，用 props 传递给子组件，子组件通过调用这个函数处理
• 兄弟之间
  • 通过共同的父组件通信
  • 消息订阅与发布机制

状态提升：如果有很多组件个使用某个状态，state就放在他们共同的父组件上。在该todolist中，通过共同的父组件通信。

state

本例的待办事项，Header、List、Item、Footer都要使用，统一放在App组件上，格式如下：

state = { todos: [todo] }

todo = {
	id: 1,  // 独一无二的id
	todo: "sleep",  // 项目的说明文字
	done: false  // 是否checked为已完成
}

细节实现

需要用uuid生成id。App组件代码如下，其余源代码见GitHub项目的src目录：

import React, { Component } from "react";
import { v4 as uuidv4 } from "uuid";
import Header from "./components/header/Header.jsx";
import List from "./components/list/List.jsx";
import Footer from "./components/footer/Footer.jsx";

export default class App extends Component {
  state = {
    todos: [],
  };
  /* 在父亲这里写添加项目的函数，作为参数传递给Header */
  // 添加项目
  addTodo = (data) => {
    const todos = this.state.todos;
    todos.push({ id: uuidv4(), todo: data, done: false }); // id：标识； todo：事件名称；done：事件完成状态
    this.setState({ todos });
  };
  // 改变项目的完成状态
  changeTodoDone = (todoId) => {
    const todos = this.state.todos;
    todos.forEach((todo) => {
      if (todo.id === todoId) {
        todo.done = !todo.done;
      }
    });
    this.setState({ todos });
  };
  // 删除项目
  deleteTodo = (todoId) => {
    const todos = this.state.todos;
    for (let i = 0; i < todos.length; i++) {
      if (todos[i].id === todoId) {
        todos.splice(i, 1);
        break;
      }
    }
    this.setState({ todos });
  };
  // 清空所有已选项目
  clearDones = () => {
    const todos = this.state.todos;
    for (let i = 0; i < todos.length; i++) {
      if (todos[i].done === true) {
        todos.splice(i, 1);
        i--;
        continue;
      }
    }
    this.setState({ todos });
  };
  // 清空所有项目
  clearAll = () => {
    this.setState({ todos: [] });
  };

  render() {
    return (
      <div className="app-wrapper">
        <Header addTodo={this.addTodo}></Header>
        <List
          todos={this.state.todos}
          changeTodoDone={this.changeTodoDone}
          deleteTodo={this.deleteTodo}
        ></List>
        <Footer
          todos={this.state.todos}
          clearDones={this.clearDones}
          clearAll={this.clearAll}
        ></Footer>
      </div>
    );
  }
}

部署到服务器上

基于脚手架，npm run build，生成build目录。将build目录下的全部文件复制到服务器中即可。

注意：若文件并不直接放在服务器public的目录下，而是有别的目录，需要注意修改index,html中的几个引用js、css代码的地址：使用./xxx.js而不是自动生成的/xxx.js。
☞ 项目体验地址