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就是Enter鍵，當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的設計思路和部分代碼，如有不懂的地方可通過評論或私信找到我