【前端项目——组件】TodoList实现（js / react）

Everglowwwwww

907人浏览 · 2024-04-24 19:49:08

Everglowwwwww · 2024-04-24 19:49:08 发布

先上组件图
在这里插入图片描述

功能点：

增加：在输入框输入内容，点击绿色键添加进去，添加进去后输入框内容置空（没处理空内容，个人感觉自用无所谓）
删除：鼠标移到列表项可以显式红色删除键，删除该项
全选：没有内容时默认不选，点击全选，取消点击就是全不选。如果所有item都被勾选，全选会自动被勾选
计数：记录已经勾选的item，和总的item

总之要注意的就是（主要是js里）：
全选勾选要和todolist动态结合，比如所有item勾选了那么全选也要选上，再就是如果在全选的时候又新增item，由于新增默认是checked=false，所以全选会自动取消勾选

js实现

1. html代码，构建骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class='todo'>
        <div class='todoInput'>
            <input class='todoInputText' type='text' placeholder='Add a new item'/>
            <button class="todoInputButton">Add</button>
        </div>
        <ul class='todolist'></ul>
        <span>全选</span>
        <input class="selectAll" type='checkbox' style="margin: 20px 10px;"  defaultChecked={false}/>
        <br />  
    </div>
    <script src="./test.js"></script>
</body>
</html>

2. css 样式

*{
    margin: 0;
    padding: 0;

}
.todo{
    margin-left: 10px;
}
.todoInput{
    display: flex;
}
.todoInput input{
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
}
.todoInput button{
    padding: 5px 20px;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}
.todo{
    width: 30%;
}

.todolist li{
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
}
.todolist li button {
  display: none;
  padding: 5px 20px;
  margin-left: 10px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.todolist li:hover button {
  display: block;
}
.todolist li input[type="checkbox"] {
    margin: 0 10px;
}

3. js代码
js写是真麻烦😡，我给一些步骤尽量复用了

let todoInputText = document.querySelector(".todoInputText");
let todoInputButton = document.querySelector(".todoInputButton");
let todolist = document.querySelector(".todolist");
let listitems = [];
let todo = document.querySelector(".todo");

// 显示当前选择条数,初始化
let count = document.createElement("span");
count.textContent = '当前选择' + listitems.filter(item => item.isDone === true).length + '条/共' + listitems.length + '条';
todo.appendChild(count);

// 选择全部
let selectAll = document.querySelector(".selectAll");
// 更新函数
function updateAll() {
    count.textContent = '当前选择' + listitems.filter(item => item.isDone === true).length + '条/共' + listitems.length + '条';
    selectAll.checked = listitems.length && listitems.every(item => item.isDone === true);
}

// 为每个li元素绑定事件
todoInputButton.addEventListener("click", function () {
    //添加数组元素并绑定事件

    //更新数组元素
    let item = {};
    item.content = todoInputText.value;
    item.isDone = false;
    listitems.push(item);

    //创建li元素内部结构，并绑定事件
    let li = document.createElement("li");
    let div = document.createElement("div");
    let checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = false;
    div.appendChild(checkbox);
    checkbox.addEventListener("click", function (event) {
        item.isDone = event.target.checked;
        updateAll();
    });
    let span = document.createElement("span");
    span.textContent = item.content;
    div.appendChild(span);

    //删除数组元素
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "X";
    deleteButton.addEventListener("click", function (event) {
        let index = listitems.indexOf(item);
        listitems.splice(index, 1);
        event.target.parentNode.parentNode.removeChild(event.target.parentNode);
        updateAll();
    });
    li.appendChild(div);
    li.appendChild(deleteButton);
    todolist.appendChild(li);

    // 更新页面显式函数
    updateAll();
    todoInputText.value = "";

});


function updateCount(state) {
    listitems.forEach(item => item.isDone = state);
    count.textContent = '当前选择' + listitems.filter(item => item.isDone === true).length + '条/共' + listitems.length + '条';
    todolist.querySelectorAll("input[type='checkbox']").forEach((item) => item.checked = state)
}
// 选择全部
selectAll.addEventListener("click", function (event) {
    // 没有元素时不被勾选
    if (listitems.length === 0) {
        event.target.checked = false;
        return;
    }
    // 勾选全部/取消全部
    if (event.target.checked) {
        updateCount(true);
    }
    else {
        updateCount(false);
    }
});

react实现

react靠hook太方便了！！！❤ 一下就实现了🙁
话不多说，直接上代码

1. jsx代码

import React, { useState } from 'react'
export default function Viewproject() {
    const [todolist, setTodoList]=useState([]);
    const handleTodoChange=(e,index)=>{
        let newTodoList=todolist.map((item,i)=>{
            if(i===index){
                return {...item,isDone:e.target.checked}
            }
            return item
        })
        setTodoList(newTodoList)
    }

    const input_ref=React.createRef();
  return (
    <div style={{padding: '20px'}}>
        <div>
            <div className={styles.todo}>
                <div className={styles.todoInput}>
                    <input ref={input_ref} type='text' placeholder='Add a new item'/>
                    <button onClick={()=>{setTodoList([...todolist,{checked:false,content:input_ref.current.value}]);input_ref.current.value=''}}>Add</button>
                </div>
                <ul className={styles.todolist}>
                {
                    todolist.map((item,index) => (
                        <li key={index}>
                            <div>
                                <input type='checkbox' checked={item.isDone} onChange={(e)=>handleTodoChange(e,index)}/>
                                {item.content}
                            </div>
                            <button onClick={()=>setTodoList(todolist.filter((_,i)=>i!==index))}>X</button>
                        </li>
                    ))
                }
                <span>全选</span>
                <input type='checkbox' style={{margin: '20px 10px'}} onChange={(e)=>{
                    if (e.target.checked) {
                        setTodoList(todolist.map(item=>({...item,isDone:true})))
                    }else{
                        setTodoList(todolist.map(item=>({...item,isDone:false})))
                    }
                    }} checked={todolist.length>0&&todolist.every(item=>item.isDone===true)} defaultChecked={false}/>
                <br />
                <span>当前选择{todolist.filter(item=>item.isDone).length}条/共{todolist.length}条</span>
                </ul>
            </div>
            
            
        </div>
    </div>
  )
}

2. css代码

.todoInput{
    display: flex;
}
.todoInput input{
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
}
.todoInput button{
    padding: 5px 20px;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}
.todo{
    width: 30%;
}

.todolist li{
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
}
.todolist li button {
  display: none;
  padding: 5px 20px;
  margin-left: 10px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.todolist li:hover button {
  display: block;
}
.todolist li input[type="checkbox"] {
    margin: 0 10px;
}

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git