react map遍历时事件无效

最新推荐文章于 2023-03-16 08:59:29 发布

adele_vivi

最新推荐文章于 2023-03-16 08:59:29 发布

阅读量1.6k

点赞数 1

分类专栏： react map 添加事件文章标签： map 遍历 react

本文链接：https://blog.csdn.net/adele_viv/article/details/73802009

版权

react map 添加事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如上图所示，我用map遍历元素，然后添加click事件，并进行return，会报错（无法读取到事件/事件未定义）

进行一番探索，终于搞定啦！

不要在map的时候进行return，先定义一个变量，将map的结果保存，example，我将它们保存到一个数组里，然后return这个数组就ok啦

我写的比较粗糙，后面goole了下，已经有小伙伴发现这个bug了,写的挺详细的，大家可以去观看（地址：http://www.tuicool.com/articles/Ejmu63）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

adele_vivi

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react map遍历时事件无效

hahahhahahahha123456的博客

10-24

385

import React from 'react'; import './Left.css'; const menuArr_ = ['用户管理', '用户登录', '房源管理', '财务管理']; class Left extends React.Component { constructor(props) { super(props); this.s...

react学习笔记 item2 --- JSX

诗渊的博客

11-18

1582

本文介绍了 React 中 JSX 的使用方法，介绍了JSX 的优点，以及JSX 的一些常用的语法。

参与评论您还未登录，请先登录后发表或查看评论

React的props.children使用map函数来遍历会收到异常显示，为什么？应如何遍历？

最新发布

m0_60676278的博客

03-16

312

主要是因为我们不能保证将是一个数组。

react map遍历时点击事件不起作用，报错事件undefined

AliceWu的博客

07-18

3333

第一次使用map函数遍历数组并且返回渲染到组件的时候，不加点击事件是可以正常渲染的，但是只要添加点击事件就会报错事件未定义，报错代码如下所示： //点击事件 handleClickNext=()=&amp;gt;{ alert(1) } return( this.state.showList.map(function(item,key){ ret...

react中 map便利后的数据添加点击事件如果需要传递参数怎么写

社会人

04-08

1716

MMp 的新手是不是都在找这个问题，话不多说直接上代码找了多少博客没有看懂你们能写点通俗的，新手看得懂的不行吗这次你说看不懂我真不信 className={this.state.isSelect === i ? 'activeted' : '' //用不上不要复制进去了我是点击添加样式用的 this.setCur = this.setCur.bind(this)//这个用来干啥的还...

Taro小程序学习总结

庚中

10-15

1400

1. Taro 1.1. 介绍官网开发文档 Taro 是一套遵循 React 语法规范的多端开发解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。多端：微信小程序 H5 React Native 支付宝小程序百度智能小程序快应用适配中 2. 运行项目 2.1. 安装脚手架工具@...

js基础1

xxxxxxxr的博客

12-03

713

JavaScript 对大小写敏感注意变量可以有不同的数据类型：字符串用引号数字布尔值真 / 假：true/false 数组用于在单一引用中存储多个值的结构对象JavaScript 里一切皆对象，一切皆可储存在变量里运算符(en-US)是一类数学符号，可以根据两个值（或变量）产生结果赋值运算符=为变量赋值等于===测试两个值是否相等，并返回一个true/false（布尔）值不等于...

前端2020面试题195道

weijieyuhyt的博客

01-13

1万+

HTML5面试题一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，混杂模式...

react中使用map时onClick事件失效

weixin_30952535的博客

01-07

535

分享一些踩过的坑 react中使用map时onClick事件失效 <span> { count.map( (item,index)=>{ return <span style={{paddingRight:2,cursor:'pointer'}} key={index} onCl...

react map数组循环嵌套，获取每级属性和防止事件冒泡

qq_41737172的博客

08-17

580

循环数组，显示和获取属性，并阻止事件冒泡 ![Alt] html： <div className="leaseBox test-1"> <ul className="lease_build"> {this.state.buildList.map((i, index) => {

map在遍历中删除元素,避免迭代器失效

Freeway的博客

08-21

7323

C++：在迭代中删除map的成员首先要清楚一点，迭代器相当于是容器上的指针，容器可以自己管理内存，因此迭代器可能失效。如果你在不知情的情况下使用了失效的迭代器，后果是不可预料的。可能程序立即崩掉，也可能什么事都没有发生。崩掉了算你幸运，因为你至少知道出了问题，不然有你受的。回到正题，我想说什么呢？比如：程序代码

react map遍历

热门推荐

sherry_0706的博客

10-16

3万+

react map遍历记录一下项目制作过程中学到的一些方法，以便温习render(){ return ( <ul className={style.decoratewrapper}> { this.state.decoratedata.map(i => (

如何优雅地在React中处理事件响应

老干部的大前端

06-19

7134

本文讨论React中，三种绑定事件回调的方式。第一种有额外的性能损失；第二种需要手动绑定this，代码量增多；第三种用到了ES7的特性，目前并非默认支持，需要Babel插件的支持，但是写法最为简洁，也不需要手动绑定this。推荐使用第二种和第三种方式。

React遍历数组

牛栏山矿泉水

09-29

861

1、问题背景利用React遍历数组，并用数组元素生成无序列表 2、实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>React遍历数组</title> <script type="text/jav

ReactJS 中数组遍历 map的使用

Wu_shuxuan的博客

12-19

5574

在index.js中在Decribe.js中浏览器中：注意：在map函数中一定要有return ；

react中的map遍历

LPLIFE的博客

11-13

2万+

constructor(props) { super(props); this.state = { list:[ 'learn react', 'learn english' ] } } render() { //jsx语法 return ( <div> ...

react map遍历返回对象写法

weixin_43294560的博客

06-06

2432

xx.map(item=>({键值对}))

react 解决map遍历的标签中this失效 TypeError: Cannot read properties of undefined (reading ‘handleUserClick‘)

shiyongzhe88的博客

11-10

779

render(){ let list = this.props.users; // let self = this; return ( <div> <ul className='user-list'> { list.map(function(user){ ...

React中详解阻止事件冒泡及其应用

在React中，理解并处理事件冒泡是关键的一部分，特别是在涉及用户交互的组件设计时。本文首先回顾了JavaScript中的事件机制，特别是事件的捕获和冒泡过程。在DOM中，事件通常按照从根节点到目标节点（捕获阶段）再到...