使用React Hooks做一个todolist

import React, { useState, useEffect, useRef, createContext } from 'react'
import "./todo.css"
import Starts from "./starts"
export const CountContext = createContext()

function Title() {
    return <div className="Title"><h1>Todos</h1></div>
}

function Add(props) {
    let [val, setVal] = useState("")
    // let input=useRef()

    let { addData, all, unall } = props
    return (
        <div>
            <button id="all"
                onClick={() => {
                    all()
                }}
            >全选</button>
            <button id="all"
                onClick={() => {
                    unall()
                }}
            >反选</button><input id="new-todo" placeholder="What needs to be done?"
                autoComplete="off" type="text" value={val}
                onChange={({ target }) => setVal(target.value)}
                onKeyDown={(e) => {
                    if (e.code === "Enter") {
                        addData(val)
                        setVal("")
                    }
                    // console.log(e.code)
                }}
            />
        </div>
    )

}
function Li(props) {
    let { data, remove, changeDone } = props
    let { id, done, txt } = data
    let [edit, setEdit] = useState("")
    let editInput = useRef()
    useEffect(() => {
        if (edit) {
            editInput.current.focus()
        }
    }, [edit])
    // console.log(data)
    return (
        <li className={edit ? "editing" : ""}>
            <div className={"todo " + (done ? "done" : "")}>
                <div className="display">
                    <input
                        className="check"
                        type="checkbox"
                        checked={done}
                        onChange={({ target }) => {
                            changeDone(id, target.checked)
                        }} />
                    <div className="todo-content"
                        onDoubleClick={() => {
                            setEdit(true)
                        }}
                    >
                        {txt}
                    </div>
                    <span className="todo-destory"
                        onClick={() => {
                            remove(id)
                        }
                        }
                    >×</span>
                </div>
                <div className="edit" >
                    <input className="todo-input" type="text"
                        onBlur={() => {
                            setEdit(false)
                        }
                        }
                        value={txt}
                        onChange={({ target }) => {
                            // value=target.value
                        }
                        }
                        ref={editInput} />
                </div>
            </div>
        </li>
    )
}


function Todolist(props) {
    let { data } = props
    return (
        <ul id="todo-list">
            {
                data.map(item => {
                    return <Li
                        {...props}
                        key={item.id}
                        data={item} />
                })
            }
        </ul>
    )
}

function TodoApp() {
    let [data, setData] = useState([
        {
            id: 0,
            txt: "内容-1",
            done: false
        },
        {
            id: 1,
            txt: "内容-2",
            done: true
        },
        {
            id: 2,
            txt: "内容-3",
            done: false
        }, {
            id: 3,
            txt: "内容-4",
            done: true
        },
    ])
    const [showArr, setShowArr] = useState([...data]);
    // 当 data 发生改变时，执行该 effect，替换 showArr
    useEffect(() => {
        setShowArr([...data]);
    }, [data]);

    let addData = (txt) => {
        data.push({
            id: Date.now(),
            txt,
            done: false
        });
        setData([...data])
        console.log(data)
    }
    //删除数据
    let remove = (id) => {
        setData(data.filter(item => {
            return item.id !== id
        }))

    }
    //删除已选中
    let del = () => {
        setData(prevState => {
            return prevState.filter(item => !item.done)
            // const copy = [...prevState]
            // copy.forEach(item => {
            //     item.done = false
            // });
            // return copy;
        })

    }
    //切换选中
    let changeDone = (id, done) => {
        data.forEach(item => {
            if (item.id === id) {
                item.done = done
            }
        })
        setData([...data])
    }
    //全选
    let all = () => {
        setData(prevState => {
            const copy = [...prevState]
            copy.forEach(item => {
                item.done = true
            })
            return copy
        })
    }
    //反选
    let unall = () => {
        setData(prevSta => {
            const copyt = [...prevSta]
            copyt.forEach(item => {
                if (item.done) {
                    item.done = false
                } else {
                    item.done = true
                }
                console.log(item.done)
                // item.done = !item.done
            }
            )
            return copyt
        })
        // setData([...data])
    }
    // let unDoneData = data.filter(item => !item.done)
    // let DoneData = data.filter(item => item.done)
    let showStatusList = (showStatus) => {
        if (showStatus === "complete") {
            const newdata = data.filter(item => item.done)
            setShowArr([...newdata])
            console.log(showArr)
        } else if (showStatus === "active") {
            const newdata = data.filter(item => !item.done)
            setShowArr([...newdata])
            console.log(showArr)
        } else {
            setShowArr([...data])

        }
    }

    return (
        <div id="todoapp">
            <Title />
            <div className="content">
                <Add addData={addData} all={all} unall={unall} />
                <Todolist
                    data={data}
                    remove={remove}
                    changeDone={changeDone}
                    showArr={showArr} />
                <CountContext.Provider value={{ data, del, showStatusList }}>
                    <Starts />
                </CountContext.Provider>
                {/* <Starts data={data}
                    del={del} 
                    /> */}
            </div>
        </div>
    )
}

export default TodoApp

todolist底部bar(分开写，使用上下文对象)

import React, { useContext} from 'react'

import {CountContext} from "./todo"

function Starts() {
    let {data,del,showStatusList} = useContext(CountContext)
    let unDoneData = data.filter(item => !item.done)
    let DoneData = data.filter(item => item.done)
    return (
        <div>
            <span> {unDoneData.length} 未完成</span>
            <span> {DoneData.length} 已完成</span>
            <span 
                className="quan"
                onClick={()=>{
                    showStatusList("all")
                    console.log("com")
                }}>All</span>
            <span 
                className="active"
                onClick={()=>{
                    showStatusList("active")
                }}>Active</span>
            <span 
                className="completed"
                onClick={()=>{
                    showStatusList("complete")
                }}>Completed</span>

            <span className="com"
                onClick={del}
            >Clear completed</span>
        </div>
    )
}
export default Starts