# TodoList

**Repository Path**: chen-jiaming/todo-list

## Basic Information

- **Project Name**: TodoList
- **Description**: 任务列表的增加、删除
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-12
- **Last Updated**: 2021-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TodoList
## 一、完成页面
![](./index.png)



## 二、页面结构
```
--src
    --components
        --Header
        --List
        --Item
        --Footer
    --App.jsx
    --index.js
```

## 三、实现功能

### 1.Header

- 在输入框中输入任务（不能为空，为空时提示警告信息），回车后列表添加一条数据

### 2.List

- 循环嵌入Item组件

### 3.Item

- 鼠标移入时高亮且显示删除按钮，移出时恢复
- 勾选、取消勾选某一个任务时修改state的是否完成属性（done）的值
- 点击删除某一个任务时提示是否确定删除，确定则删除列表的任务，不删除则不操作

### 4.Footer

- 点击复选框时，根据复选框是否选中修改列表的任务全选或者是全不选
- 根据列表的数据的done属性进行判断计算已完成任务和总任务数
- 清除已完成任务则删除列表中勾选的任务

### App.jsx

- 定义状态和操作状态的方法

## 四、总结

1. 动态初始化列表，如何确定将数据放在哪个组件的state中？
   - 某个组件使用：放在其自身的state中
   - 某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
2. 父子组件间通信
   - 【父组件】给【子组件】传递数据：通过props传递
   - 【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
3. 注意defaultChecked只在第一次指定的时候才起作用，而checked要配合onChange进行使用
4. 状态在哪里，操作状态的方法就在哪里