hooks实现toDoList

这里不涉及声明周期，所以只是用到了useState：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-03-07 16:19:28
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-03-10 14:24:56
 */
import React, {  useState } from 'react'

const TodoList = () => {
    let [name, setName] = useState('')
    let [age, setAge] = useState('')
    let [habby, setHabby] = useState('')
    let [dataList, setDateList] = useState([])
    const changeInput = (set, value) => {
        if (value.target) {
            set(_ => value.target.value)
        } else {
            set(_ => value)
        }
    }
    // 新增列表
    // name唯一标识
    const add = () => {
        if (dataList.find(i => i.name === name)) {
            alert("姓名重复！")
            return false
        }
        setDateList(list => [...list, { name, age, habby }])
        // 清空默认值
        setName("")
        setAge("")
        setHabby("")
    }
    // 删除
    const del=(name)=>{
        setDateList(list=>list.filter(i=>name!==i.name))
    }
    return (
        <div style={{ marginTop: "20px" }}>
            <div style={{ marginBottom: "20px" }}>
                姓名：<input value={name} onChange={(e) => { changeInput(setName, e.target.value) }} /> <br />
            </div>
            <div style={{ marginBottom: "20px" }}>
                年龄：<input value={age} onChange={(e) => { changeInput(setAge, e.target.value) }} /> <br />
            </div>
            <div style={{ marginBottom: "20px" }}>
                爱好：<input value={habby} onChange={(e) => { changeInput(setHabby, e.target.value) }} /> <br />
            </div>
            <button onClick={add}>新增</button>
            <table style={{ border: "1px solid red", width: "300px", marginTop: "20px" }}>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>爱好</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {dataList.map(i => {
                        return (
                            <tr key={i.name}>
                                <th>{i.name}</th>
                                <th>{i.age}</th>
                                <th>{i.habby}</th>
                                <th style={{color:"orange"}} onClick={()=>{del(i.name)}}>删除</th>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        </div>
    )
}

export default TodoList