React技巧4(如何处理List里面的Item)
时间:2022-05-08
本文章向大家介绍React技巧4(如何处理List里面的Item),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04
2.React 技巧2(避免无意义的父节点)----2018.01.05
3.React 技巧3(如何优雅的渲染一个List)----2018.01.06
4.React 技巧4(如何处理List里面的Item)----2018.01.07
5.React 技巧5(TodoList实现)----2018.01.08
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
上节课,我们渲染了一个List,这节课,我们来删除里面的Item项,
下节课我们会讲解,添加,删除!
我们先加个删除按钮
<li key={data.id}>{data.title} <button>删除</button></li>
我们顺便美化下界面,提前熟悉下postCss的一些写法
修改 app -> public -> css -> shop.pcss
.content {
> li {
list-style-type: none;
margin-top: 10px;
}
button {
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 12px;
padding: 2px 10px;
margin-left: 10px;
}
}
看下浏览器界面
接下来我们给按钮添加事件,绑定函数,并把id传参过去,点击删除看看能不能拿到参数id
<button onClick={this.handleItemDel.bind(this, data.id)}>删除</button>
handleItemDel(id) {
console.log(id);
}
这里还有一种写法,不绑定this,直接写一个回调函数在里面
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
我们点击按钮,看能否大打印出当前id
我们点击了 前端人人5 打印出了它的id!
下面我们来写删除事件!
handleItemDel(id) {
let list = this.state.list;
list.splice(list.findIndex(data => data.id === id), 1);
this.setState({list: list})
}
完整代码
import React from 'react';
import '../../public/css/shop.pcss'
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{id: 1, title: '前端人人1'},
{id: 2, title: '前端人人2'},
{id: 3, title: '前端人人3'},
{id: 4, title: '前端人人4'},
{id: 5, title: '前端人人5'},
{id: 6, title: '前端人人6'},
{id: 7, title: '前端人人7'},
{id: 8, title: '前端人人8'},
{id: 9, title: '前端人人9'}
]
};
}
handleItemDel(id) {
let list = this.state.list;
list.splice(list.findIndex(data => data.id === id), 1);
this.setState({list: list})
}
render() {
let {list} = this.state;
return (
<div className="content">
{
list.map(data => <li key={data.id}>{data.title}
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
</li>)
}
</div>
);
}
}
export default Index;
ok!
浏览器运行,点击删除 前端人人5 试下
成功删除!
- Python学习笔记(3):数据集操作-列的统一操作
- Python学习笔记(4):自定义时间类
- Mysql备份系列(3)--innobackupex备份mysql大数据(全量+增量)操作记录
- 微信小程序开发:设置消息推送
- Mysql备份系列(1)--备份方案总结性梳理
- ASP.NET中常用的优化性能的方法(转贴,Icyer收集整理)
- 顶象全场景IoT安全方案解决物联网两大难题
- 诡异的【session丢失】和【<img src="">标签】
- TensorFlow核心使用要点
- “搜一搜”直达生活服务 微信连接移动消费新场景
- Linux服务器安全登录设置记录
- Linux系统下的ssh使用(依据个人经验总结)
- 从MapX到MapXtreme2004[4]-标注AutoLabel
- Linux下锁定账号,禁止登录系统的设置总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 习题6-4 使用函数输出指定范围内的Fibonacci数
- 浙大版《C语言程序设计(第3版)》题目集 习题6-5 使用函数验证哥德巴赫猜想
- Linux Used内存到底哪里去了?
- 浙大版《C语言程序设计(第3版)》题目集 习题6-6 使用函数输出一个整数的逆序数
- 浙大版《C语言程序设计(第3版)》题目集 练习8-2 计算两数的和与差
- SQL查找是否"存在",别再count了!
- 浙大版《C语言程序设计(第3版)》题目集 练习8-8 移动字母
- 超赞!墙裂推荐这款开源、轻量无 Agent 自动化运维平台
- 详解Docker中Image、Container与 Volume 的迁移
- 浙大版《C语言程序设计(第3版)》题目集 习题8-1 拆分实数的整数与小数部分
- 如何在 Linux 上恢复误删除的文件或目录
- 浙大版《C语言程序设计(第3版)》题目集 习题8-2 在数组中查找指定元素
- Pandas学习笔记之时间序列总结
- HTML+JS动态获取当前时间
- HTML+JS实现时钟