listTodo项目二次练习

        通过该项目熟悉，react的事件绑定、父子之间的数据传递，和分模块设计的理念，没有涉及到太多的东西，之前也写过一个todoLIst的项目相比上次知识点用的比较少，但是更加注重细节和规范，显示效果如下： 

        项目结构如下：

        项目划分一个入口，四大组件分别：顶部的输入框、中间的list，list显示的item以及底部的footer，下面分别介绍。

一、package.json

{
  "name": "my-app2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "nanoid": "^3.3.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

nanoid：用于生成唯一标识的id，相比UUID库更加轻量

二、App 1、App.js

         App.js作为所以组件的父组件，所以将所需要的数组都定义在他里面，以便于子组件之间的相互交互。父组件向子组件传递数据使用props，子组件向父组件传递，使用方法绑定，下面的内容都会涉及到。

import React, {Component} from 'react';
import Header from "./components/header";
import Footer from "./components/footer";
import List from "./components/list";

import './App.css'

export default class App extends Component {

    //默认数据
    state = {
        todoList: [
            {
                id: '001',
                name: '吃饭',
                done: false
            },
            {
                id: '002',
                name: '睡觉',
                done: true
            }
        ]
    }

    render() {
        const {todoList} = this.state
        return (
            
                {/*子组件Header向父组件传递数据，定义addTodo方法，子类this.props.addTodo()即可以调用父类的方法传递*/}
                

                
                

2、App.css

.todo-wrapper {
    margin-left: 30px;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none
}

三、Header 1、header/index.js

import React, {Component} from 'react';
import {nanoid} from "nanoid";
import './index.css'

export default class Header extends Component {

    render() {
        return (
            
                
            
        );
    }

    /**
     * 监听键盘事件，当为13的时候是回车键
     */
    onKeyDown = (event) => {
        if (event.keyCode === 13) {
            //过滤空数据
            if (event.target.value.trim() === '') {
                return
            }
            //生成对象，调用nanoid()生成ID
            let list = {
                id: nanoid(),
                name: event.target.value,
                done: false
            }
            this.props.addTodo(list)
            //输入框置空
            event.target.value = ''
        }
    }
}

2、header/index.css

.header-wrapper input {
    margin-top: 30px;
    width: 300px;
    height: 32px;
    font-size:14px;
    text-indent: 10px;
}

四、List 1、list/index.js

import React, {Component} from 'react';
import Item from "../item";

export default class List extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        //不能这么写，错误的
        //const {todoList} = this.props.todoList
        const {todoList, updateTodo, deleteTodo} = this.props
        return (
            
                {
                    todoList.map(item => {
                        return (
                            //{...item}表示解构数据，即将item的内容挂载在子类Item的props节点上
                            
                        )
                    })
                }
            
        );
    }
}

2、index.css

无

五、Item 1、item/index.js

import React, {Component} from 'react';
import './index.css'

export default class Item extends Component {

    constructor(props) {
        super(props);
        this.state = {
            mouse: false
        }
    }

    render() {
        //解构数据
        const {mouse} = this.state
        const {id, name, done} = this.props
        return (
            //onMouseEnter、onMouseLeave监听鼠标点击的事件，label表示扩大checkbox的点击范围
            {background: mouse ? '#ddd' : 'white'}}
                onMouseEnter={() => this.onMouseEvent(true)}
                onMouseLeave={() => this.onMouseEvent(false)}>
                
                     this.onCheckChange(event, id)}/>
                    {name}
                
                {display: mouse ? 'block' : 'none'}}
                        onClick={() => this.onDeleteClick(id)}>删除
                
            
        );
    }

    /**
     * 鼠标移动事件
     * @param flag
     */
    onMouseEvent = (flag) => {
        this.setState({
            mouse: flag
        })
    }

    /**
     * 选择框点击时间
     *
     * @param event
     * @param id
     */
    onCheckChange = (event, id) => {
        this.props.updateTodo(id, event.target.checked)
    }

    /**
     * 删除按钮事件
     */
    onDeleteClick = (id) => {
        //注意这里有个window，不写会报错
        if (window.confirm('确定删除吗？')) {
            this.props.deleteTodo(id)
        }
    }
}

2、item/index.css

.item {
    width: 500px;
    height: 100%;
    display: block;
    border: 1px solid gray;
    padding: 5px;
    border-radius: 5px;
    background: white;
    margin: 20px 0 0 0;
}

.item-button {
    float: right;
}

.item :first-child {
    margin-right: 10px;
}

六、Footer 1、footer/index.js

import React, {Component} from 'react';
import './index.css'

export default class Footer extends Component {

    render() {
        const {todoList} = this.props
        //注意reduce的如何使用，怎么过滤数据
        const doneCount = todoList.reduce((previousValue, currentValue) => {
            return previousValue + (currentValue.done ? 1 : 0)
        }, 0)
        const total = todoList.length
        return (
            
                
                    
                    已完成{doneCount}/全部{total}
                    {float: 'right'}} onClick={this.clearClickAll}>清除已完成任务
                
            
        );
    }

    /**
     * 调用父类的方法传递数据
     * @param event
     */
    onFooterCheckAll = (event) => {
        this.props.onFooterCheckAll(event.target.checked)
    }

    /**
     * 调用父类的方法传递数据
     * @param event
     */
    clearClickAll = () => {
        this.props.clearClick()
    }
}

2、footer/index.css

.footer-input {
    margin-right: 10px;
}

.footer-wrapper {
    margin-top: 30px;
    width: 500px;
}