react中元素事件传入参数写法

  • react中的元素绑定事件并且传入参数,不能使用箭头函数,否则传参会立即调用
  • 错误写法:页面刷新会立即调用
<li
  key={index+item}
  onClick={this.deleteItem(index)}
>
  {item}
</li>

deleteItem = (index) => {
  console.log(index)
}
  • 正确写法:click的时候才会调用
<li
  key={index+item}
  onClick={this.deleteItem.bind(this,index)}
>
  {item}
</li>

deleteItem(index){
  console.log(index)
}

原文地址:https://www.cnblogs.com/orime/p/11577271.html

时间: 2024-10-11 16:20:15

react中元素事件传入参数写法的相关文章

Extjs中给同一个GridPanel中的事件添加参数的方法

Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({            text:'启用',            scope:this,            handler:this.isUseWin.createDelegate (this,[1])        });        this.isNotUse = new Ext.Action({            text:'停用',            

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --

向线程中的函数传入参数的注意事项

1. 当函数的形参类型为 string, 而传入的参数类型为 char[] 时, 需要在线程函数中转型, 如此可以避免空悬指针.如: void f(int, std::string const&); void oops(int some_parm) { char buffer[100]; sprintf(buffer, "%i", some_parm); //std::thread(f, 3, buffer) //not do this std::thread(f, 3, st

如果给JQ的ajax方法中的success()传入参数?

当时在使用JQuery提供的Ajax技术的时候,我有个需求,就是要给它请求成功后调用的success()方法传入参数: 所以,我就直接这样子写了: <script> function getTypeList(name){ $.ajax({ url : '<c:url value="admin/type_loadTypeList.action"/>', type : 'get', contentType : "text/html;charset=utf-

jq load()方法中加载文件中元素事件绑定失效的问题

1.load()方法: $(selector).load(URL,data,callback): selector:页面中需要加载外部文件的DOM节点: URL:外部文件地址: data:请求一同发送的查询字符串集合: callback:load()方法完成后所执行的函数: 2.问题:被加载页面中的JavaScript代码失效,这是因为load加载的外部文件会把Script部分删除掉. 解决:使用load方法中的回调函数加载绑定事件: 原文地址:https://www.cnblogs.com/n

React中事件的处理

React 中使用 onClick 类似的写法来监听事件,注意 this 绑定问题 React 里严格遵循单项数据流,没有数据双向绑定,所以要处理两件事,第一是元素本身值的赋值,第二是值改变以后的事件,例如输入框需要设置 value 和 onChange . 1.在 src -> components 文件夹中,再新建 CartSample.js ,具体代码如下: import React, { Component } from 'react'; export default class Car

React中,map出来的元素添加事件无法使用

在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下面加一个回复的input,input期初是隐藏的,当我点击每天评论下面的回复时,input输入框显示 这里举个例子,比如我数组里有三组文字,我把它们渲染到li中,点击每个li,alert()出每个li里面的内容,按照下面的方法,你会发觉出错,无法显示 var myTest = React.creat

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

jQuery中Ajax事件beforesend及各参数含义

jQuery中Ajax事件beforesend及各参数含义 2014-01-21 22:27 1678人阅读 评论(0) 收藏 举报  分类: jquery(36)  转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the befor