react使用hook实现todoList案例

todoList 是前端非常常见的一个小案例，今天使用react中的Hook来实现这个小功能

基本页面的布置如下

基本页面差不多是这样，现在开始写逻辑部分

首先我们可以先声明一个todolist的列表数据，方便我们其它组件的更改，之后在把这个列表数据和input关联实现动态的增加

引入useState之后，声明一组列表数据，然后将组件渲染出来

const [list,useList] = useState([ { id:0, text:'看一本书', done:false }, { id:1, text:'健身', done:false }, { id:2, text:'按时吃饭', done:true } ])

添加完数据之后，我们将数据传给create组件，然后在create组件之中遍历数据，根据数据的条数，生成Li组件（即内容组件）

Li组件：

import React from "react"; export default function Li(props) { let {data,changeState} = props; return ( <li className="check-wrap"> <input type="checkBox" className="li-check" checked={data.done} onChange={(e)=>{ changeState(data.id,e.target.checked); }}></input > <p className="li-text">{data.text}</p> <span className="li-clear">X</span> </li> ) }

create组件：

import React from "react"; import Li from "./Li"; export default function Create(props) { let {data,changeState} = props; return ( <div> { data.map(item => <Li data = {item} key={item.id} changeState={changeState}></Li> ) } </div> ) } 接下来是统计未完成的数目和已完成的数目，即渲染state组件

我们将数据传给state组件，然后分别统计已完成的数据和未完成的数据，渲染到span标签里就行

import React from "react"; export default function State(props) { let {data} = props; let undoData = data.filter(item => !item.done); let doData = data.filter(item => item.done); return ( <div className="todo-bottom"> <span className="bottom-left"> <span>待完成:</span> <span className="text-state">{undoData.length}</span> </span> <span className="bottom-right"> <span>已完成:</span> <span className="text-state">{doData.length}</span> </span> </div> ) }

删除列表

删除相应列表的话只需要在APP组件中添加删除函数，随后调用即可

function deleteLi(id) { let arr = list.filter(item => item.id !== id ) setList([...arr]) } 到此，基本逻辑大致完成，我们需要再添加一个input框，来供用户自己输入要完成的计划

对此，我们新建一个输入的组件，专门负责添加列表数据即可

import React from "react"; export default function New(props) { let {addList} = props; return ( <div className="new-wrap"> <input className="new-input" placeholder="请输入你的计划" onKeyDown={(e)=>{ if(e.key==="Enter"&&e.target.value.trim()!=""){ addList(e.target.value) } e.target.value="" }}></input> </div> ) }

对此，我们的功能大致上已经完成，但是还可以优化一点，比如让完成的列表处于计划后面，让未完成的处于前面，这里只需要在chang’eState函数中进行一个调序，这样基本功能就完成了 讲述的可能有点，大家可以去看我的源代码 github地址：https://github.com/wdqyj-sx/reate-project