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