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