React + Antd 实现一个TodoList

前言

打工人的一天，没用TodoList之前，先完成优先级高的任务，做完之后花一分钟思考下一个任务，突然间又插一个任务进来，然后又忘了下一步要干什么，弄的手忙脚乱。下班前写日报，翻聊天记录，看代码，看cr，总结自己做了什么。

用了TodoList之后，首先列一个待办清单写下这一天所需要完成的工作内容，完成之后勾选一下，中间有需求插入，就再新建一个任务，有条不紊的完成一天的工作，最后再根据已完成项总结出工作成果，输出工作日报。

组件划分

• TodoList —— 整体容器
• Header —— 头部输入框
• List —— 待处理和已完成列表
• Item —— 每一项任务
  ​

数据结构

• waitList：待处理列表
• doneList：已完成列表
• name：任务内容
• done：任务勾选状态

state = {
    waitList: [
        { name: '买一辆车', done: false },
        { name: '买一套房', done: false },
    ],
    doneList: [
        { name: '一年攒下5w存款', done: true },
    ],
}

创建任务

实现按下回车新建一个任务，键盘keyUp事件回调会获取一个Event对象，keyCode代表了每一个按键对应的数字，13就是回车键，当keyCode等于13并且输入框有值的时候就去出发创建任务的方法

handleEnter = (event) => {
    const { keyCode, target } = event;
    if (keyCode !== 13 || !target.value) return;
    this.props.addTodo({
        name: target.value,
        done: false
    });
    target.value = '';
}

封装一个创建任务的方法，这里需要注意区分创建到待处理和已完成的任务
创建到待处理：Input输入创建、取消勾选已完成任务
创建到已完成：勾选待处理任务

addTodo = (listType) => {
    return (todo) => {
        const val = this.state[listType];
        this.setState({
            [listType]: [todo, ...val]
        });
    };
}

删除任务

根据列表标识删除待处理列表或已完成列表的任务，根据索引找到对应的那条数据，然后更新列表数据

removeTodo = (listType) => {
    return (index) => {
        const val = this.state[listType];
        this.setState({
            [listType]: val.filter((_, i) => index !== i)
        });
        return val.find((_, i) => index === i);
    }
}

完成/取消任务

完成任务：将待处理列表数据删除，添加到已完成列表中
取消完成：将已完成列表数据删除，添加到待处理列表中
这里需要注意，在删除任务的方法中我们需要return出删掉的那条数据，方便添加到另一个列表中

changeTodoStatus = (listType) => {
    return (index, status) => {
        if (listType === "waitList" && status) {
            const item = this.removeTodo("waitList")(index);
            this.addTodo("doneList")({ ...item, done: status });
        }
        if (listType === "doneList" && !status) {
            const item = this.removeTodo("doneList")(index);
            this.addTodo("waitList")({ ...item, done: status });
        }
    }
}

完结

以上就是用React实现一个简单的TodoList的设计思路和部分代码，如有不懂的地方可通过评论或私信找到我