React入门 - 06(TodoList 列表数据的新增和删除)

本文主要是介绍React入门 - 06(TodoList 列表数据的新增和删除),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本章内容

目录

      • 一、实践一下 React 的列表渲染
      • 二、TodoList 新增功能
      • 三、列表循环的 key
      • 四、删除

上一节内容我们完成了输入框中可以自由输入内容,这一节我们继续 TodoList功能的完善:列表数据的新增和删除。

在开始之前,我们先介绍一下 React 如何渲染数组数据到界面上。打开官网,在这里明确告诉我们列表的渲染可以使用数组的 map或者 filter方法
在这里插入图片描述

一、实践一下 React 的列表渲染

1、首先打开 TodoList.js文件, state 状态中初始化一个 list数组,用于放置列表数据,我们可以里面填充一些数据,使用 React的列表渲染来渲染这些数据到页面。

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的语法this.state = {inputValue: '', list: ['React 入门-01', 'React 入门-02', 'React 入门-03'] // 1、定义一个list ,用于放置列表数据}}render() {return (<Fragment><div><input value={this.state.inputValue} onChange={this.changeInputValue.bind(this)} /><button> 提交 </button></div>{/* 2、使用map 方法进行渲染数据 */}<ul>{this.state.list.map((item, index) => {return (<li> {item} </li>)})}</ul></Fragment>)}changeInputValue(e) {console.log(e.target.value)this.setState({inputValue: e.target.value})}
}export default TodoList

2、运行项目,打开浏览器观察页面,可以看到数据已经成功渲染
在这里插入图片描述

二、TodoList 新增功能

上面我们已经知道怎么去渲染一个数组列表了。接下来我们继续完善 TodoList功能:输入框输入内容后,点击提交,数据添加至列表

1、首先我们给 ”提交“ 按钮绑定点击事件,定义事件方法为 addListData
2、addListData方法里将 inputValue数据推到 list数组中,同时清空 inputValue的数据,让输入框清空。注意的是,在 React中数据的更新需要使用 setState方法
3、然后通过 map方法 将数据渲染到界面里
4、运行界面,发现新增功能已经实现。

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的语法this.state = {inputValue: '', list: [] // 1、定义一个list 的空数组}}render() {return (<Fragment><div><input value={this.state.inputValue} onChange={this.changeInputValue.bind(this)} />{/* 2、按钮绑定点击事件 */}<button onClick={this.addListData.bind(this)}> 提交 </button></div>{/* 3、使用map 方法进行渲染数据 */}<ul>{this.state.list.map((item, index) => {return (<li> {item} </li>)})}</ul></Fragment>)}// 4、按钮点击事件中,将 inputValue 的值推到 list 数组中。addListData() {// 5、注意数据的更新还是使用 React 的 setState 方法this.setState({list: [...this.state.list, this.state.inputValue]})this.setState({inputValue: ''})}changeInputValue(e) {console.log(e.target.value)this.setState({inputValue: e.target.value})}
}export default TodoList

三、列表循环的 key

  • 上面我们似乎已经将功能完美实现了,可是打开控制台,你会发现如下图的错误警告。它提示我们: 在 React中,进行列表的循环渲染时,需要给渲染的每一项添加一个 key作为其唯一标识。

  • 我们根据提示修改一下代码,给列表的每一项都增加一个key,再运行就会发现错误警告已经消失了

  • 至于为什么需要添加 key以及这个 key的作用是什么,我们后面的章节中会进行介绍,现在请忽略它
    在这里插入图片描述

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的语法this.state = {inputValue: '', list: [] // 1、定义一个list 的空数组}}render() {return (<Fragment><div><input value={this.state.inputValue} onChange={this.changeInputValue.bind(this)} />{/* 2、按钮绑定点击事件 */}<button onClick={this.addListData.bind(this)}> 提交 </button></div>{/* 3、使用map 方法进行渲染数据 */}<ul>{this.state.list.map((item, index) => {{/* 4、使用map 方法进行渲染数据 */}return (<li key={index}> {item} </li>)})}</ul></Fragment>)}// 4、按钮点击事件中,将 inputValue 的值推到 list 数组中。addListData() {// 5、注意数据的更新还是使用 React 的 setState 方法this.setState({list: [...this.state.list, this.state.inputValue]})this.setState({inputValue: ''})}changeInputValue(e) {console.log(e.target.value)this.setState({inputValue: e.target.value})}
}export default TodoList

四、删除

上面我们完成了 TodoList的新增功能。现在我们进行删除功能:点击列表的每一项,数据进行删除

1、首先我们给列表的每一项绑定一个点击事件, 事件方法为 deleteData,将循环的 index 传递给 deleteData方法

2、在 deleteData方法中,删除 list数组中的对应数据.注意在删除之前,需要对数据 list数据进行拷贝,否则会破坏原数组数据,出现数据错乱的现象

3、运行界面,进行操作,可以发现功能已经完美实现。

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的语法this.state = {inputValue: '', list: [] // 1、定义一个list 的空数组}}render() {return (<Fragment><div><input value={this.state.inputValue} onChange={this.changeInputValue.bind(this)} /><button onClick={this.addListData.bind(this)}> 提交 </button></div><ul>{this.state.list.map((item, index) => {// 2、给 li 元素绑定点击事件return (<li key={index} onClick={(this.deleteData.bind(this,index))}> {item} </li>)})}</ul></Fragment>)}// 3、列表项的点击事件, 接收循环下标 indexdeleteData(index) {// 4、先拷贝一份 list 数据.注意如果直接修改 state 里 list 数据,会出现数据错乱问题const list = [...this.state.list]// 5、使用 splice 把数据剔除出去list.splice(index, 1)// 6、使用 setState 方法更新数据this.setState({list: list})}addListData() {this.setState({list: [...this.state.list, this.state.inputValue]})this.setState({inputValue: ''})}changeInputValue(e) {this.setState({inputValue: e.target.value})}
}export default TodoList

到此,本章内容结束!

这篇关于React入门 - 06(TodoList 列表数据的新增和删除)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/591812

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T