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;可以在在上面切换 启动时指定版本

富格林:力争打破黑幕安全盈利

富格林认为&#xff0c;在当前全球环境因素的影响下&#xff0c;黄金价格会波动地相对频繁些。现货黄金作为一种可以双向交易的金融产品&#xff0c;为投资者提供了丰富的获利机会。然而&#xff0c;伴随着盈利机会而来的是黑幕风险。在安全盈利的同时&#xff0c;还需要防范黑…

Ant-Design-Vue 动态表头

Ant Design Vue 是一个基于 Vue.js 的企业级 UI 组件库&#xff0c;提供了丰富的 UI 组件以满足不同的需求。在处理动态表头和动态数据时&#xff0c;你通常需要结合 Vue 的数据绑定和循环渲染特性来实现。 下面是一个基本的例子&#xff0c;展示如何使用 Ant Design Vue 的 a…

基于机器学习的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…

Elasticsearch 提供了多种实现自动补全和基于上下文的提示的功能

Elasticsearch 提供了多种实现自动补全和基于上下文的提示的功能&#xff0c;这些功能通常用于搜索框中的自动完成建议。以下是一些常用的 Elasticsearch 特性和相关实现方法&#xff1a; ### 1. 完成建议&#xff08;Completion Suggester&#xff09; 完成建议&#xff08;…

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 窗体布局、编写代码 打开文件(以本地媒体文件为主)打开地址(以网络媒体地址为主)播放|暂停功能停…

vxe-table 监听某一列的值

需求&#xff1a;根据A列的内容&#xff0c;B列显示下拉框&#xff0c;文本&#xff0c;数值类型的数据 总思路&#xff1a;设置元素点击(cell-click)、双击事件(cell-dblclick)&#xff0c;拿到当前行的数据&#xff0c;监听当前行的A列&#xff0c;如果变化&#xff0c;B列做…

oracle跨版本exdp 从高版本到低版本 从18c到10g

由于工作需要&#xff0c;有时候需要将oracle18c的数据同步到另一个环境的10g版本 测试环境 &#xff1a; 源数据库版本&#xff1a;18.13.0.0 目标数据库版本&#xff1a;10.2.0.4 结论&#xff1a; 1 从低版本导出&#xff0c;导入到高版本&#xff0c;可以&#xff0c;不…

vue3:父组件如何给子组件传值

在 Vue 3 中&#xff0c;父组件可以通过 props 将数据传递给子组件。下面是一个简单的例子来展示如何实现这一点。 父组件&#xff08;ParentComponent.vue&#xff09; <template><div><h1>父组件</h1><ChildComponent :message"parentMess…

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的…

从零学习es8

配置 编辑 elasticsearch.yml xpack.security.enabled: true 单节点 discovery.type: single-node设置账号&#xff1a; elasticsearch-reset-password -u elastic 如果要将密码设置为特定值&#xff0c;请使用交互式 (-i) 参数运行该命令。 elasticsearch-reset-password -i…