React基础教程:TodoList案例

news2024/11/23 15:32:27

todoList案例——增加

定义状态

// 定义状态
    state = {
        list: ["kevin", "book", "paul"]
    }

利用ul遍历list数组

<ul>
                    {
                        this.state.list.map(item =>
                            <li style={{fontWeight: "bold", fontSize: "20px"}} key={item.id}>{item.name}</li>
                        )
                    }
                </ul>

绑定点击事件,把input的值添加到list

不推荐这种写法❌

handlerClick = ()=>{
        console.log("Click4", this.myRef.current.value);

        // 不要这样写,因为不要直接修改状态,可能会造成不可预期的问题
        this.state.list.push(this.myRef.current.value);

        this.setState({
            list: this.state.list,
        })
    }

推荐这样的写法✅

handlerClick = ()=>{
        console.log("Click4", this.myRef.current.value);
    
    	// 定义一个新的数组接收
        let newList = [...this.state.list];
        newList.push(this.myRef.current.value);

        this.setState({
            list: newList
        })
    }

效果展示:

在这里插入图片描述

这里会存在一个问题,如果我插入同样的key,比如paul,这里会提示报错,提示children存在相同的key,但是这个key应该是唯一的。

在这里插入图片描述

修改方式如下:

给list加入唯一标识id

// 定义状态
 state = {
     list: [
         {
             id: 1,
             name: "kevin"
         },
         {
             id: 2,
             name: "book"
         },
         {
             id: 3,
             name: "paul"
         }]
 }

ul进行遍历的时候,绑定唯一标识符item.id

<ul>
                 {
                     this.state.list.map(item =>
                         <li style={{fontWeight: "bold", fontSize: "20px"}} key={item.id}>{item.name}</li>
                     )
                 }
             </ul>

注意在push的时候也要添加id

newList.push({
         id: Math.random()*100000000, // 生产不同的id
         name: this.myRef.current.value
     });

再次添加相同的名字,也不会报错

在这里插入图片描述

todoList案例——删除

首先给每一个li标签后,添加删除按钮

<ul>
                    {
                        this.state.list.map(item =>
                            <li style={{fontWeight: "bold", fontSize: "20px"}} key={item.id}>{item.name}
                                <Button size={"small"}
                                        style={{marginLeft:10}}
                                        type={"primary"}
                                        shape={"circle"}
                                        danger
                                        icon={<DeleteOutlined/>} />
                            </li>
                        )
                    }
                </ul>

实现效果如下:

在这里插入图片描述

接着给按钮,绑定删除事件onClick={()=>this.handlerDeleteClick(index)},并且修改列表渲染的方式,(item,index),这里的index将作为后续的额参数传递使用

<ul>
                    {
                        this.state.list.map((item, index) =>
                            <li style={{fontWeight: "bold", fontSize: "20px"}} key={item.id}>{item.name}
                                <Button size={"small"}
                                        style={{marginLeft:10}}
                                        type={"primary"}
                                        shape={"circle"}
                                        danger
                                        onClick={()=>this.handlerDeleteClick(index)}
                                        icon={<DeleteOutlined/>} />
                            </li>
                        )
                    }
                </ul>

实现handlerDeleteClick函数

handlerDeleteClick(index) {
        console.log("Del-", index);
        // 深复制
        let newList = this.state.list.concat();
        newList.splice(index, 1);
        this.setState({
            list: newList
        })
    }

实现效果如下:

在这里插入图片描述

完整的代码

注意,这里我使用了react前端的UI框架antd,大家需要自行安装使用即可。

npm install antd --save
import React, {Component} from "react";
import {Button} from 'antd';
import {DeleteOutlined} from '@ant-design/icons';

import './css/App.css'

export default class App extends Component {

    a = 35;

    myRef = React.createRef();

    // 定义状态
    state = {
        list: [
            {
                id: 1,
                name: "kevin"
            },
            {
                id: 2,
                name: "book"
            },
            {
                id: 3,
                name: "paul"
            }]
    }

    render() {
        return (
            <div style={{marginTop: 10, marginLeft: 10}}>
                <input style={{width: 200}}
                       ref={this.myRef}/>
                {/*非常推荐*/}
                <Button style={{backgroundColor: '#2ba471', border: "none"}} size={"middle"} type={"primary"}
                        onClick={() => {
                            this.handlerClick() // 非常推荐,传参数
                        }}>添加</Button>

                <ul>
                    {
                        this.state.list.map((item, index) =>
                            <li style={{fontWeight: "bold", fontSize: "20px"}} key={item.id}>{item.name}
                                <Button size={"small"}
                                        style={{marginLeft: 10}}
                                        type={"primary"}
                                        shape={"circle"}
                                        danger
                                        onClick={() => this.handlerDeleteClick(index)}
                                        icon={<DeleteOutlined/>}/>
                            </li>
                        )
                    }
                </ul>

            </div>
        )
    }

    handlerClick = () => {
        console.log("Click4", this.myRef.current.value);

        // 不要这样写,因为不要直接修改状态,可能会造成不可预期的问题
        // this.state.list.push(this.myRef.current.value);

        let newList = [...this.state.list];
        newList.push({
            id: Math.random() * 100000000, // 生产不同的id
            name: this.myRef.current.value
        });

        this.setState({
            list: newList
        })
    }

    handlerDeleteClick(index) {
        console.log("Del-", index);
        // 深复制
        let newList = this.state.list.concat();
        newList.splice(index, 1);
        this.setState({
            list: newList
        })
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1814193.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

后端项目实战--瑞吉外卖项目软件说明书

瑞吉外卖项目软件说明书 一、项目概述 瑞吉外卖项目是一个外卖服务平台&#xff0c;用户可以通过该平台浏览餐厅菜单、下单、支付以及追踪订单状态。产品原型就是一款产品成型之前的一个简单的框架&#xff0c;就是将页面的排版布局展现出来&#xff0c;使产品得初步构思有一…

Linux ldd和ldconfig

ldconfig ldconfig 查看默认库路径和ld.so.conf包含的库路径&#xff0c;来建立运行时动态装载的库查找路径。 ldconfig命令的用途,主要是在默认搜寻目录(/lib和/usr/lib)以及动态库配置文件/etc/ld.so.conf内所列的目录下,搜索出可共享的动态链接库(格式如前介绍,lib*.so*),…

推挽式B类功率放大器的基本原理

单晶体管 B 类放大器&#xff08;图 1&#xff09;使用高 Q 值储能电路作为负载来抑制高次谐波分量。通过采用高 Q 谐振电路&#xff0c;输出电压仅包含基波分量&#xff0c;使放大器能够忠实地再现输入信号。尽管集电极电流是半波整流正弦波&#xff0c;但高 Q 值储能电路将谐…

11_1、多态性:概念及运算符重载

多态性 多态的概念和类型多态的类型多态的实现 运算符重载运算符重载的概念和规则概念规则 运算符重载为类的成员函数双目运算符单目运算符 运算符重载为类的友元函数双目运算符重载单目运算符重载 多态的概念和类型 消息&#xff1a;消息在C编程中指的是对类的成员函数的调用…

【C++进阶】模板与仿函数:C++编程中的泛型与函数式编程思想

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;栈和队列相关知识 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀模板进阶 &#x1f9e9;<&…

深度学习之激活函数

激活函数&#xff08;Activation Function&#xff09;是一种添加到人工神经网络中的函数&#xff0c;旨在帮助网络学习数据中的复杂模式。在神经元中&#xff0c;输入的input经过一系列加权求和后作用于另一个函数&#xff0c;这个函数就是这里的激活函数。 1. 为什么需要激活…

在Oxygen中如何打开文件管理器并显示文件所在目录

▲ 搜索“大龙谈智能内容”关注公众号▲ 在Oxygen中&#xff0c;我们常需要查看项目中的某文件在Windows“文件资源管理器”所在位置&#xff0c;从而进行拷贝、分享等各种操作。 通过以下方法可以实现&#xff1a; 1. 在Oxygen的“项目”中选择文件并单击右键 2. 选择菜单…

数据可视化后起之秀——pyecharts

题目一&#xff1a;绘制折线图&#xff0c;展示商家A与商家B各类饮品的销售额 题目描述&#xff1a; 编写程序。根据第9.3.1&#xff0c;绘制折线图&#xff0c;展示商家A与商家B各类饮品的销售额。 运行代码&#xff1a; #绘制折线图&#xff0c;展示商家A与商家B各类饮品的…

【区块链】解码拜占庭将军问题:区块链共识机制的哲学基石

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 解码拜占庭将军问题&#xff1a;区块链共识机制的哲学基石引言一、拜占庭将军问…

ComfyUI 快速搭建流程

相关地址 ComfyUIPytorch版本 环境准备 nvidia 3090 ----------------------------------------------------------------------------- | NVIDIA-SMI 515.65.01 Driver Version: 515.65.01 CUDA Version: 11.7 | |--------------------------------------------…

码垛机性能的关键因素及优化策略

在工业自动化领域&#xff0c;码垛机以其高效、准确的特点&#xff0c;成为现代生产线上的得力助手。然而&#xff0c;要想充分发挥码垛机的性能优势&#xff0c;就必须深入了解影响其性能的关键因素&#xff0c;并针对性地制定优化策略。星派将为您详细解析码垛机性能的关键影…

数据仓库与数据挖掘实验练习题

练习题2 1. 使用超级英雄列表来填充一个新的 Series 对象。 2. 使用力量元组来填充一个新的 Series 对象。 3. 创建一个 Series&#xff0c;将超级英雄作为索引标签&#xff0c;力量等级作为值。将这个 Series 赋值给 heroes 变量。 4. 提取 heroes Series 的前两行。 5. 提取 …

程序员必备的职业素养:专业精神、沟通能力与持续学习

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 专业精神&#xff1a;技术的执着追求 沟通能力&#xff1a;团队合作的桥梁 持续学习&#xff1a;不断进步的动力 结语 我的…

世优科技AI数字人多模态交互系统“世优波塔”正式发布

2024年6月6日&#xff0c;世优科技“波塔发布会”在北京举办&#xff0c;本次发布会上&#xff0c;世优科技以全新的“波塔”产品诠释了更高效、更智能、更全面的AI数字人产品及软硬件全场景解决方案&#xff0c;实现了世优品牌、产品和价值的全面跃迁。来自行业协会、数字产业…

商用车CAN数据数字化是促进生态环保高质量发展的桥梁纽带

在当今这个智能化、电动化、信息化、数字化快速发展的时代&#xff0c;其中数字化转型已经成为各行各业提升效率、优化管理的关键途径&#xff0c;21世纪这个被誉为“大数据时代”的纪元&#xff0c;数据的潜力、生产力、作为基础设施被无限放大&#xff0c;其在各个领域&#…

6-1RT-Thread事件集

6-1RT-Thread事件集 其中&#xff0c;一对多方式比较常见。一对多方式其线程与时间的关系又可分为特定时间触发唤醒线程&#xff0c;类似于逻辑非控制电路&#xff0c;灯泡亮灭&#xff0c;由一个开关就可以触发。 事件集中&#xff0c;任意事件触发唤醒线程类似于逻辑或控制电…

后继者00

题目链接 后继者 题目描述 注意点 题目中的树是二叉搜索树节点p在二叉搜索树中一定存在 解答思路 本题关键是找到值大于节点p的值的第一个节点&#xff0c;因为本题中的树是二叉搜索树&#xff0c;所以左子树的值始终小于根节点&#xff0c;右子树的值始终大于根节点访问到…

【画板案例-颜色 Objective-C语言】

一、接下来,我们来说这个颜色的问题, 1.设置这个颜色啊,那么,颜色,首先啊,就我们的示例程序而言,好,我们现在只要点击这个按钮, 就能够让某一条路径,也是达到不同的颜色, 我们可以让每一条路径,去设置颜色, 那么,这个颜色啊,首先,思路啊,大家先来分析一下, …

pytest中失败用例重跑

pip install pytest-rerunfailures 下载rerunfailures插件包 配置文件中加入命令 --reruns 次数 也可在命令行中pytest --rerun-failures2 可以在allure报告中看到重试效果

基于PID的直流电机自动控制系统的设计【MATLAB】

摘 要 本文在广泛查阅资料&#xff0c;了解直流电机特性的基础上&#xff0c;对直流电机的控制原理进行了的研究&#xff0c;设计了一款基于PID控制器的简单直流电机自动控制系统。 首先&#xff0c;分析了直流电机的应用背景和发展现状&#xff0c;对直流电机的工作原理和数学…