react ToDoList实现方法 增删改查 ，hook的使用

在src下增加以下文件 并在你的组件中 引入home.jsx

home.jsx

import React , { useState ,useEffect }from "react"
import './home.css'

function Todolist(){
  //  定义数据
    const [teaList ,setTeaList] = useState([{id:15 ,num:20 ,name:'blackTEA',money:123 ,stateChecked:false},
    {id:16 ,num:20 ,name:'redTEA',money:100 ,stateChecked:true},{id:17 ,name:'greenTEA',num:17 ,money:35 ,stateChecked:false}])

    const [allCode ,setAllCode] = useState(false) //全选
    const [allMoney ,setAllmoney] = useState(0) //总金额


    //  定义方法
    const payMoneyChange =(index,e)=>{ //修改数量
       let newList = [...teaList]
       newList[index].num = e.target.value
      setTeaList(newList)
    }
    const changestate =(index,e)=>{ //修改状态
      let newList = [...teaList]
      newList[index].stateChecked = e.target.checked
     setTeaList(newList)
   }
   const deleteList =(index)=>{ //删除操作
    let newList = [...teaList]
    newList.splice(index,1 )
    setTeaList(newList)
   }
    

    const changeAllcode =(e)=>{ //修改全选
      setAllCode(e)
      let newList = [...teaList]
      newList.forEach(ele => ele.stateChecked = e )
      setTeaList(newList)
    }

    const addList =()=>{ //增加子数组
      let newList = [...teaList]
      const info = {id:Math.random()*100 ,num: Math.floor(Math.random()*100) ,name:`新到茶${newList.length+1}`,money:Math.ceil(Math.random()  *1000) ,stateChecked:false }
      newList.push(info)
      setTeaList(newList)
    }


    useEffect(() => { //监听子数组变化
     const allCodeState =  teaList.every( ele => ele.stateChecked )
     setAllCode(allCodeState) //
     const money = teaList.reduce( (a,b)=>{
      if(b.stateChecked){ return a + b.money*b.num}
      return a + 0
     },0)
     setAllmoney(money)
    },[teaList]);


    const jiuList = teaList.map((ele,index) => { //数据循环
      return (
       <div  key={ele.id}   style={{display:'flex',alignItems:"center" ,marginTop:'10px' }} > 
       <input type='checkbox'  checked={ele.stateChecked} onChange={( e) =>{ changestate(index,e)  }  } />  &nbsp;
       {ele.name}   
       <span  style={{ 'margin':'0 20px' ,fontWeight:700}} > ${ele.money}</span> 
       <input type="number" style={{width:'50px'}} placeholder="请输入支付金额" value={ele.num} onChange={( e) => payMoneyChange(index,e)} />
      
       <button  className="deleteButton" onClick={()=> deleteList(index) } >×</button>
       </div> 
      )
    })

    return (<div className="todolistContent">
        <div className="titleName">Todolist</div> 
        <input type='checkbox'  checked={allCode} onChange={( e) =>{ changeAllcode(e.target.checked)  }  } />  全选  
        { allMoney ? ( <span >&nbsp; 已选金额 ： {allMoney}</span>) : ''  }  
        <button className="addContent"  onClick={addList}>添加</button>

        {jiuList}
        
        </div>)

}


export default Todolist

home.css

.todolistContent{
 padding: 10px;
}
.titleName{
 margin-bottom: 20px; font-size: 20px;
}

.addContent {
 margin-left: 20px;
 border-radius: 5px;
 border: 1px solid #eee;
 background-color: aliceblue;
 color: rgb(243, 198, 142);
 padding: 0 10px; font-size: 12px;
 cursor: pointer;
}
.deleteButton{
 margin-left: 20px; border-radius: 50%;  width: 20px;height: 20px;
 color: #fff; cursor: pointer;
 background-color: rgb(241, 71, 80); 
 border: none;
}