import useState useImperativeHandle forwardRef from reactconst Item = props ref = const todoList = id 1 title 学习webapi isDone true const renderList setTodoList = useStatetodoList const

import { useState, useImperativeHandle, forwardRef } from 'react'

const Item = (props, ref) => { const todoList = [ { id: 1, title: '学习webapi', isDone: true, }, ] const [renderList, setTodoList] = useState(todoList) const [arr, setArr] = useState(todoList) useImperativeHandle(ref, () => ({ handleAddList: value => { setTodoList([ { id: renderList.length + 1, title: value, isDone: false, }, ...renderList, ]) }, render: type => { if (type === '全部') { setArr(renderList) } else if (type === '未完成') { setArr(renderList.filter(item => !item.isDone)) } else { setArr(renderList.filter(item => item.isDone)) } }, }))

const toggleStatus = item => { const newList = renderList.map(list => { if (list.id === item.id) list.isDone = !list.isDone return list }) setTodoList(newList) }

const delItem = (id, e) => { e.stopPropagation() const newList = renderList.filter(list => list.id !== id) setTodoList(newList) }

const computedList = () => { if (arr.length) { return arr.map(item => ( <li key={item.id} onClick={() => toggleStatus(item)}> <input type="radio" id="task" checked={item.isDone} onChange={() => {}} /> {item.title} <b className="del" onClick={e => delItem(item.id, e)}> ❌ )) } else { return

return

{computedList()}

export default forwardRef(Item