初学 JS 的时候相信大家都写过一个经典案例 ：TodoList列表，这次要用 React Hook 函数组件去实现了。
APP.js部分：
import React, { useState } from 'react';
import './index.scss'
function App1() {
const [todos, setTodos] = useState([
{
id: 1,
name: '张三',
show:true,
},
])
const [titleobj, setTitleobj] = useState({
title:'',
type:null,
})
const [searchValue,setSearchValue] = useState('')
const [updataId,setUpdataId] = useState(0)
const [upValue,setupValue] = useState('')
function handleShow (val,name,id){
setTitleobj({
title:name,
type:val
})
if(id){
setUpdataId(id)
}
const divBox = document.getElementById('dog')
divBox.show()
}
const hangdeChange = (value) =>{
setSearchValue(value.target.value)
}
const hangdeName = (value) =>{
setupValue(value.target.value)
}
const handleSearch = () =>{
// console.log(searchValue)
if(searchValue){
console.log('1111',searchValue)
let arr = todos.map((item)=>{
if(item.name.includes(searchValue)){
item.show = true
}else{
item.show = false
}
return item
})
setTodos(arr)
}else{
console.log('22222')
let arr2 = todos.map((item)=>{
item.show = true
return item
})
setTodos(arr2)
}
}
const handleDel = (id) =>{
let arr = todos.filter((item)=> item.id != id)
setTodos(arr)
}
const handleColse = () =>{
setupValue('')
const divBox = document.getElementById('dog')
divBox.close()
}
index.scss部分：
#dog {
border-radius: 10px;
}
#dog::backdrop {
background: rgba(0, 0, 0, .5);
}
.todolist{
padding: 10px 0px;
display: flex;
border-bottom: 1px solid black;
}
.todolist_id{
padding: 0px 10px;
width: 100px;
border-right: 1px solid black;
}
.todolist_name{
padding: 0px 10px;
width: 200px;
border-right: 1px solid black;
}
.todolist_btn{
margin-left: 10px;
}
.title_inp{
margin-right: 10px;
}
.title_ser{
margin-right: 10px;
}
.title_add{
margin-right: 10px;
}
