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})}
}

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

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

相关文章

DAC测试实验——FPGA学习比

一、DAC简介 DAC全称Digital to Analog Converter&#xff0c;即数模转换器。它用于将主控芯片产生的数字值(0和1)转换为模拟值(电压值)。 1、DAC参数指标 2、DAC类型 常用的DAC可大致分为权电阻网络DAC、T型电阻网络DAC、倒T型电阻网络DAC以及权电流型DAC。 3、AD9708/3PD9…

Idea jdk配置的地方 启动时指定切换的地方

jdk 配置的地方 项目sdk 所在位置 管理添加或删除的地方&#xff0c;增加后&#xff0c;可以在在上面切换 启动时指定版本

基于机器学习的CFD模型降阶

降阶模型 ROM 降阶模型ROM&#xff08;Reduced Order Models&#xff09;是一种对高保真度静态或动态模型的简化方法。模型降阶在保留了模型的基本特性与主导效应的同时&#xff0c;大大减少复杂模型的CPU计算时间及存储空间。 ROM的用途&#xff1a; 加速大规模系统的仿真速度…

pytorch学习笔记7

getitem在进行索引取值的时候自动调用,也是一个魔法方法,就像列表索引取值那样,一个意思 import torchvision from torch.utils.data import DataLoaderdata_transformtorchvision.transforms.Compose([torchvision.transforms.ToTensor()] ) test_datatorchvision.datasets.C…

C++面向对象:多态性

多态性 1.概念 多态性是面向对象的程序设计的一个重要特征。在面向对象的方法中一般是这样表述多态的&#xff1a;向不同的对象发送同一个信息&#xff0c;不同的对象在接收时会产生不同的行为。也就是说&#xff0c;每个对象用自己的方式去响应共同的消息。 2.典例 下面这…

R语言绘制三变量分区地图

参考资料&#xff1a; https://mp.weixin.qq.com/s/5c7gpO2mJ2BqJevePJz3CQ tricolore包教程&#xff1a;https://github.com/jschoeley/tricolore 学习笔记&#xff1a;Ternary choropleth maps 1、测试实例 代码&#xff1a; library(ggplot2) library(rnaturalearthdata) …

android studio4.1后不能ButterKnife

麻蛋L最近发现 android studio不能使用ButterKnife啦&#xff01;ButterKnife Injections不维护&#xff0c;butterknife Zelezny也不维护&#xff01;&#xff01;&#xff01;日…难受&#xff0c;兄弟们换下一家&#xff1a;IDsCreate&#xff0c;一毛一样的好用&#xff01…

TCP/IP协议简要介绍

TCP/IP for IP version 4&#xff08;IPv4&#xff09;是一种网络协议&#xff0c;Microsoft Windows使用该协议通过internet与其他计算机进行通信。理想情况下&#xff0c;只要基于Windows的计算机通过网络进行通信&#xff0c;就会使用TCP/IP。 本文介绍TCP/IP协议的组成、协…

蓝牙模块与其他无线技术的比较与选择

在无线通信技术日新月异的今天&#xff0c;蓝牙模块、WiFi、Zigbee和NFC等技术都发挥着至关重要的作用。它们在智能设备、工业自动化、智能家居等多个领域得到广泛应用&#xff0c;各自拥有独特的优点和局限性。本文将对这几种无线技术进行详细的比较&#xff0c;分析它们的优缺…

接口自动化测试工程化——了解接口测试

什么是接口测试 接口测试也是一种功能测试 我理解的接口测试&#xff0c;其实也是一种功能测试&#xff0c;只是平时大家说的功能测试更多代指 UI 层面的功能测试&#xff0c;而接口测试更偏向于服务端层面的功能测试。 接口测试的目的 测试左移&#xff0c;尽早介入测试&a…

vlc多媒体播放器(支持各种本地视频、网络视频、音频及摄像头直播地址)winform(支持全屏)自动适应x86、x64平台插件及重要代码

1、学习vlcControl1及libvlc.dll类方法(x86为例)最新v3.0.21 1.1 本博文以控件(vlcControl1)方式为主介绍 1.2 安装-引用,添加控件到窗体 using Vlc.DotNet.Forms; 1.3 窗体布局、编写代码 打开文件(以本地媒体文件为主)打开地址(以网络媒体地址为主)播放|暂停功能停…

VMware清理拖拽缓存

磁盘空间越用越小&#xff0c;如何快速解决磁盘空间的问题&#xff0c;甩掉烦恼 安装VM tools之后可以通过拖拽的方式把文件拉入虚拟机之中。但每一次拖拽&#xff0c;其实都是现在cache文件夹里面生成一个同样的文件&#xff0c;并使用cp拷贝的方式将其拷贝到拖拽放置的目录中…

C# WPF入门学习主线篇(二十六)—— 绑定路径和数据上下文

C# WPF入门学习主线篇&#xff08;二十六&#xff09;—— 绑定路径和数据上下文 在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;数据绑定是一个核心概念&#xff0c;它允许你将UI控件的属性与数据源属性进行绑定&#xff0c;从而实现数据和UI的…

05-腾讯云Copilot及 向量数据库AI套件介绍

1 Andon Copilot核心功能介绍 2 Andon Copilot覆盖腾讯云售后、售前场景 3 腾讯云向量数据库– AI套件效果 AI 套件是腾讯云向量数据库&#xff08;Tencent Cloud VectorDB&#xff09;提供的一站式文档检索解决方案&#xff0c;包含自动化文档解析、信息补充、向量化、内容检…

HTTPS请求阶段图解分析

HTTPS请求阶段分析 请求阶段分析 请求阶段分析 一个完整、无任何缓存、未复用连接的 HTTPS 请求需要经过以下几个阶段&#xff1a; DNS 域名解析、TCP 握手、SSL 握手、服务器处理、内容传输。 一个 HTTPS 请求共需要 5 个 RTT 1 RTT&#xff08;域名解析&#xff09; 1 RTT…

工业4.0下的PLC进化论:ARMxy计算机如何重塑自动化

智能物流系统的高效与精准成为企业竞争力的关键。在这个背景下&#xff0c;传统的PLC系统因其固有的局限性&#xff0c;如扩展性差、系统封闭等&#xff0c;开始显得力不从心。ARMxy工业计算机作为新一代的PLC替代方案&#xff0c;凭借其低功耗、高性能以及高度的灵活性&#x…

H5单点登录分析介绍(登录状态检验状态透传分析)

文章目录 1、单点登录解决方案1.1、后端保存登录状态1.2、token模式 2、user服务-登录接口2.1、UserController2.2、UserInfoServiceImpl2.3、载荷2.4、响应2.5、Redis Desktop Manager 3、user服务-登录成功获取用户信息回显3.1、UserController3.2、UserInfoServiceImpl3.3、…

Unity资源 之 最受欢迎的三消游戏开发包 - Bubble Shooter Kit 【免费领取】

三消游戏开发包 - Bubble Shooter Kit 免费领取 前言资源包内容领取兑换码 前言 如果你是一名 Unity 游戏开发者&#xff0c;并且正在寻找一种快速、简单的方式来创建自己的三消游戏&#xff0c;那么 Bubble Shooter Kit 就是你所需要的。 资源包内容 Bubble Shooter Kit 是…

英文语法工具Grammarly for Word下载和安装

前言&#xff1a;论文写作语法检查和润色的时候&#xff0c;可以用Grammarly进行帮助。 Grammarly for Word的下载、安装、使用 官网下载Grammarly for Microsoft Office安装GrammarlyWord使用GrammarlyGrammarly使用 官网下载Grammarly for Microsoft Office 地址&#xff1…

【全开源】ChatGPT 机器人公众号小程序h5源码开源交付支持二开

AI机器人系统对接OPENAI&#xff1a;智能互联的无限可能 &#x1f310; 一、引言&#xff1a;AI机器人系统与OPENAI的碰撞 在科技日新月异的今天&#xff0c;AI机器人系统正逐渐渗透到我们生活的各个角落。而当这一智能系统与全球领先的OPENAI技术相结合&#xff0c;又将擦出…