react 解决map遍历的标签中this失效

骑猪看日落 2021-07-25 00:53 487阅读 0赞

原因:map中的this并不是当前类的this
    解决:
    	1、xx.map(function(xx){xx}.bind(this))
    	2、xx.map(xx,bind(this))  当参数传递
    	3、在map外定义x=this;在map内使用x代替this

代码示例:

import React,{ Component} from 'react';
    import PropTypes from 'prop-types';
    
    export default class App extends Component{ 
        static propTypes={ 
            comments:PropTypes.array.isRequired,
            del:PropTypes.func.isRequired
        }
        render(){ 
            const { comments} = this.props;
    
            return(
                <div>
                    <h2>评论回复</h2>
                    { 
                        comments.map(function(item,index){ 
                            return (                <li key={ index}>
                                <h3>{ item.uname}</h3>
                                <p>{ item.content}</p>
                                
                                <button onClick={ ()=>{ this.del2(index)}}>删除</button>
                            </li>)
                        }.bind(this))
                        
                    }
                </div>
            )
        }
    
        del2=(index)=>{ 
            this.props.del(index);
        }
    
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，487人围观）

还没有评论，来说两句吧...

相关阅读

相关 map的遍历

map的遍历有多种，下面列举一种示例： // Map<Integer,List<Long>> itemNbrMap = new HashMap<>();

超、凢脫俗/ 2024年03月23日 14:54/ 0 赞/ 28 阅读

相关 struts2标签遍历map集合

首先我们来构造几个map集合。假设如下代码都是在ssh配置环境下搭建好，(至少struts2开发环境搭建好) (1).java 代码下面的student对象包含的字

待我称王封你为后i/ 2022年09月17日 13:20/ 0 赞/ 117 阅读

相关 Map遍历

[遍历Map的四种方法][Map] public static void main(String\[\] args) \{ Map<String, String

以你之姓@/ 2022年08月04日 16:31/ 0 赞/ 178 阅读

相关 react中的map遍历

<ul id="ul_rwardList"> { this.state.reward.map(function (item) {

电玩女神/ 2022年07月15日 13:42/ 0 赞/ 220 阅读

相关遍历map

public static void main(String\[\] args) \{ Map<String, String> map = new HashMap

朴灿烈づ我的快乐病毒、/ 2022年06月01日 06:57/ 0 赞/ 233 阅读

相关【Map】遍历Map

/ 根据学院id查所在校区的id和name集合-王雷-测试成功-2017年10月1日10:41:00 / @Test public v

红太狼/ 2022年05月26日 13:39/ 0 赞/ 212 阅读

相关 map遍历

import java.util.; public class Test{ public static void main(Str

拼搏现实的明天。/ 2022年05月12日 02:30/ 0 赞/ 216 阅读

相关 react map遍历，react native map遍历

react map遍历（截取部分重要代码） {this.state.images.map((img, i) => { return (

红太狼/ 2022年03月01日 12:46/ 0 赞/ 261 阅读

相关 C++中map的遍历

一点睛 map数据的遍历，也有3种方法应用前向迭代器方式应用后向迭代器方式应用数组方式二 map反向迭代器的使用实战 1 代码 i

女爷i/ 2021年09月19日 06:02/ 0 赞/ 970 阅读

相关 react 解决map遍历的标签中this失效

原因:map中的this并不是当前类的this 解决: 1、xx.map(function(xx){xx}.bind(this)) 2、xx

骑猪看日落/ 2021年07月25日 00:53/ 0 赞/ 488 阅读