当前位置: 首页 > news >正文

React基础教程:TodoList案例

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, // 生产不同的idname: 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"}dangericon={<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"}dangeronClick={()=>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"}dangeronClick={() => 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, // 生产不同的idname: 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})}
}

相关文章:

React基础教程:TodoList案例

todoList案例——增加 定义状态 // 定义状态state {list: ["kevin", "book", "paul"]}利用ul遍历list数组 <ul>{this.state.list.map(item ><li style{{fontWeight: "bold", fontSize: "20px"}} key{item.i…...

PHP超详细安装及应用

目录 所需安装包如下 一、PHP安装 依赖包安装 安装扩展工具&#xff08;先将PHP所需的软件包全部拖进centos根目录下&#xff09; 安装libmcrypt 安装mhash 安装mcrypt 安装PHP 二、设置LAMP组件环境&#xff08;要保证mysql、http都安装完成了&#xff09; Php.ini的建…...

【算法篇】大数加法JavaScript版

题目描述 以字符串的形式读入两个数字&#xff0c;编写一个函数计算它们的和&#xff0c;以字符串形式返回。 数据范围&#xff1a;s.length,t.length≤100000&#xff0c;字符串仅由’0’~‘9’构成 要求&#xff1a;时间复杂度 &#x1d442;(&#x1d45b;) 示例1 输入&…...

【LeetCode 128】 最长连续子序列

判断前一位数在不在字典中是这道题的关键之处&#xff0c;这样就可以避免重复查找&#xff0c;从而达到O(n) 的时间复杂度。如果没有这个判断&#xff0c;那么时间复杂度最坏也得是O(N^2)级别的。 1. 题目 2. 分析 合理利用数据结构。本题中使用了set来保存数组的元素&#x…...

SpringCloud-面试篇(二十六)

&#xff08;1&#xff09;Sentinel核心API-ProcessorslotChain...

使用__try...__except和try...catch捕获异常实例分享(附源码)

在C/C++的代码中,为了防止代码块执行的过程中产生异常导致软件崩溃,我们会给代码块添加__try...__except或try...catch保护,防止软件因为操作内部触发的异常产生崩溃。本文简单地介绍一下这两种异常捕获的使用示例。 1、概述 当软件运行过程中代码抛出异常,如果异常没有处…...

基于51单片机的简易温控水杯恒温杯仿真设计( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的简易温控水杯恒温杯仿真设计( proteus仿真程序设计报告讲解视频&#xff09; 仿真图proteus7.8及以上 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0099 1. 主要功能&#xff1a; 基于51单片机的简易温控水杯恒温…...

王德峰视频讲座,王德峰视频全部大全集,百度云百度网盘资源下载

王德峰教授的视频讲座其内容丰富、观点独到&#xff0c;深受广大学者和爱好者的喜爱。很多朋友想下载王德峰教授的讲座视频&#xff0c;今天我给大家分享一个下载王德峰教授视频的方法 搜索 “方圆资源网官网” 打开 “方圆资源网官网&#xff0c;找到王德峰教授的讲座 总之&a…...

Visual Studio和BOM历史渊源

今天看文档无意间碰到了微软对编码格式解释&#xff0c;如下链接&#xff1a; Understanding file encoding in VS Code and PowerShell - PowerShell | Microsoft LearnConfigure file encoding in VS Code and PowerShellhttps://learn.microsoft.com/en-us/powershell/scrip…...

虚拟现实(VR)游戏与增强现实(AR)游戏的区别

随着科技的飞速发展&#xff0c;沉浸式游戏体验已经成为现代娱乐的重要组成部分。虚拟现实&#xff08;VR&#xff09;游戏和增强现实&#xff08;AR&#xff09;游戏是这类体验中的两大主流&#xff0c;但它们在技术实现、用户体验和应用场景上有显著的区别。本文将详细探讨VR…...

git已经设置了自己的账号和密码,提交信息还是别人解决方法

1、运行一下命令缓存输入的用户名和密码&#xff1a; git config --global credential.helper wincred2、重新设置自己的邮箱和用户名 查看配置信息 git config --list修改用户名和邮箱地址&#xff1a; git config --global user.name 你自己的username git config --glo…...

探索面向对象与并发编程的完美融合:Java中的实践与思考

探索面向对象与并发编程的完美融合:Java中的实践与思考 在软件开发的世界里,面向对象编程(OOP)与并发编程(Concurrency)常被视为两个独立的领域。然而,Java语言却将这两个领域无缝地融合在一起,使得面向对象思想能够有效简化并发编程的复杂性。那么,如何才能用面向对…...

探索在线问诊系统的安全性与隐私保护

随着远程医疗的普及&#xff0c;在线问诊系统成为医疗服务的重要组成部分。然而&#xff0c;随着医疗数据的在线传输和存储&#xff0c;患者的隐私保护和数据安全面临巨大挑战。本文将探讨在线问诊系统的安全性与隐私保护&#xff0c;介绍常见的安全措施和技术实现&#xff0c;…...

How To: Localize Bar and Ribbon Skin Items

您可以使用Localizer对象自定义皮肤菜单&#xff0c;而不是迭代每个条形皮肤子菜单项和功能区皮肤库项容器来手动修改这些项。此方法允许您同时自定义所有现有栏子菜单和功能区库中的外观项目。 创建BarLocalizer类的派生类并重写XtraLocalizer.GetLocalizedString方法。 pub…...

通过 urllib 结合代理IP下载文件实现Python爬虫

本教程将向您展示如何使用 Python 的 urllib 库结合代理 IP 来下载文件。这种技术对于避免被目标网站封锁 IP 或简单地从不同的地理位置访问网站特别有用。通过这种方式&#xff0c;您可以更安全地进行网页数据的爬取和分析。 安装必须的库 在开始编写代码之前&#xff0c;您…...

单线服务器与双线服务器的区别?

单线服务器和双线服务器之间有什么区别呢&#xff1f;接下来就让小万来为大家具体分析一下吧&#xff01; 首先单线服务器和双线服务器之间运营商的性质是不同的&#xff0c;单线服务器主要是一家带宽运营商&#xff0c;而双线服务器则是有两家运营商提供带宽的线路。 单线服务…...

使用Hadoop MapReduce实现各省学生总分降序排序,根据省份分出输出到不同文件

使用Hadoop MapReduce实现各省学生总分降序排序&#xff0c;根据省份分出输出到不同文件 本文将展示如何使用Hadoop MapReduce对一组学生成绩数据进行处理&#xff0c;将各省的学生成绩按总分降序排序并按照省份进行分区将结果分别输出到不同的文件中。 数据样例 我们将使用…...

LeetCode | 66.加一

这道题有多个思路&#xff0c;可以依次取数组的每一位&#xff0c;乘10后加下一位&#xff0c;直到最后一位&#xff0c;就得到我们数组所表示的数字&#xff0c;然后加一&#xff0c;然后把新得到的数字再转化为对应的数组&#xff0c;我的做法是直接取数组的最后一位&#xf…...

Oracle最终会扼杀MySQL?(译)

原文网站&#xff1a;https://www.percona.com/blog/is-oracle-finally-killing-mysql/ 作者&#xff1a;Peter Zaitsev 自从Oracle收购了MySQL后&#xff0c;很多人怀疑Oracle对开源MySQL的善意&#xff0c;这篇percona的文章深入分析了Oracle已经和将要对MySQL采取的措施&a…...

分布式物联网平台特点

随着物联网&#xff08;IoT&#xff09;技术的飞速发展&#xff0c;我们正步入一个万物互联的新时代。在这个时代&#xff0c;设备、数据和服务的无缝集成是实现智能化的关键。分布式物联网平台作为这一进程的核心&#xff0c;正在成为构建智能世界的基石。 一、分布式物联网平…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...