react函数组件 todolist 增删改查

爱吃胡萝卜的兔兔

已于 2023-07-18 08:48:47 修改

阅读量141

点赞数

文章标签： react.js javascript 前端

于 2023-07-11 17:23:17 首次发布

本文链接：https://blog.csdn.net/weixin_45567934/article/details/131665177

版权

在这里插入图片描述

import React, {
    useState, useEffect, useCallback, useRef, } from "react";
import {
    Button, Input, Checkbox } from "antd";
import './todo.css'
const {
    Search } = Input;
const list = [
    {
   
        id: '0',
        name: '今天是星期一',
        check: false,
        isEdit: false
    },
    {
   
        id: '1',
        name: '今天是星期二',
        check: false,
        isEdit: false
    },
    {
   
        id: '3',
        name: '今天是星期三',
        check: false,
        isEdit: false
    },
    {
   
        id: '4',
        name: '今天是星期四',
        check: false,
        isEdit: false
    },
]
const ageLocal = {
   
    fach() {
   
        const add = JSON.parse(localStorage.getItem('vue-admin-todo') || '[]')
        add.forEach((item, index) => {
   
            item.id = index + 1
        })
        return add
    },
    save(todo) {
   
        localStorage.setItem('vue-admin-todo', JSON.stringify(todo))
    }
}
function App() {
   
    const [inpValue, setValueInp] = useState('')
    const [todoList, setTodoList] = useState(ageLocal.fach())
    const [listwwc, setListwwc] = useState([])
    const [listywc, setListywc] = useState([])
    const [valEdit, setValEdit] = useState('')
    const [types,setTypes]=useState('')
    const editRef=useRef()
    useEffect(() => {
   
        console.log(ageLocal.fach())
        setListwwc((listwwc) => listwwc = todoList.filter((item) => item.check == false))
        setListywc((listywc) => listywc = todoList.filter((item) => item.check == true))
    }, [])
    const onSearch = () => {
   
        console.log(inpValue)
        let flag = true
        todoList.forEach((item) => {
   
            if (item.name == inpValue) {
   
                flag = false
                alert('不能重复添加')
                setValueInp(