REACT 中事件处理函数传递参数的两种方式

最新推荐文章于 2024-04-28 08:12:16 发布
最新推荐文章于 2024-04-28 08:12:16 发布
阅读量5.4k 收藏 1
点赞数
分类专栏： REACT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alokka/article/details/90901013
版权

第一种是箭头函数传参

<button onClick={(value) => this.deleteRow(id, value)}>Delete Row</button>    // 箭头函数传参

箭头函数没有this指向，默认是继承外部上下的this，所以箭头函数中的this指向的就是组件

第二种是bind() 传参

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>   // bind() 形式传参

bind() 方法可以把组件的this代替函数的this

alokka
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习React 箭头函数篇
最孤单的人的博客
11-10 1442
### 对于React中函数写法，看到了有这样的写法：update = () => { ... } ，有点奇怪。
React 事件处理(函数调用)传递参数
、Edgar的博客
09-26 1642
两种方式： 第一种方式，使用箭头函数 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> 第二种方式，使用bind <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
react组件中箭头函数的使用
roymustang的博客
01-18 4025
文章目录1概念2this指向三、箭头函数不能改变this指向四、箭头函数的调用（这边以React组件举例） 1概念 箭头函数是匿名函数的另一种表达形式，简化写法。 // 普通函数 const fun = function() {} // 把匿名函数的引用地址赋值给了fun变量 箭头函数为 // 箭头函数 const fun = () => {} 举例 const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventL
react怎么做到点击传参
最新发布
qq_60504665的博客
04-28 603
在React中，点击事件传参通常涉及到在事件处理函数中访问和使用传递的参数。
react笔记之箭头函数1
qq_41632427的博客
11-01 475
前端
React向事件处理函数传递参数
qq_44718039的博客
10-19 165
React向事件处理函数里面传递参数
react事件中怎么传参？修改this指向？
weixin_62460148的博客
07-27 430
react事件中如何传参以及在react事件中this为undefined如何解决
React中如何在事件处理的时候传参（详解）
weixin_46726346的博客
09-09 3093
/执行代码 } button onClick = {但是如果有Vue的基础，可以很清楚的看到二者的区别。在Vue中，我们可以直接给fn传递参数。//执行代码 console . log(value) } button onClick = {你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。
React 事件处理
12-13
在这两种情况下，React事件对象`e`将作为第二个参数传递给事件处理函数。对于箭头函数，需要显式传递`e`，而对于`bind`，`e`以及其他任何绑定的参数都将自动传递。为了优化性能，避免不必要的重新渲染，通常推荐在...
React学习笔记之事件处理（二）
08-30
总结起来，React的事件处理机制提供了与传统DOM事件处理类似的体验，但需要注意命名规范、函数传递以及`this`的正确绑定。理解这些核心概念对于开发React应用至关重要，可以帮助你编写出更高效、可维护的代码。如果...
React中事件
09-13
React采用了与浏览器原生事件不同的处理方式，这使得React应用中的事件处理更加灵活和易于管理。本文将深入探讨React中的事件系统，包括事件绑定、事件处理函数、事件合成以及事件生命周期。 1. 事件绑定 在React中...
浅谈React Native 传参的几种方式(小结)
10-16
本文将详细讨论React Native中两种常见的传参方式：React Navigation导航传值和DeviceEventEmitter触发事件并传值。 首先，React Navigation是React Native中常用的导航库，它提供了一种优雅的方式来管理页面间的...
1-6、React组件中传值、添加事件和this丢失问题
01-20
在React组件开发中，理解和掌握组件间的值传递、事件处理以及`this`的正确使用是至关重要的。在本文中，我们将深入探讨这两个关键知识点。 ### 1、组件中传值 在React中，组件间传递数据主要是通过props（属性）...
JavaScript 学习-8.JavaScript 箭头函数的使用
qq_27371025的博客
05-20 869
前言 ES6 中引入了箭头函数() =>。箭头函数不需要使用function关键字，允许我们编写更短的函数. 箭头函数 之前使用function 定义函数 fun1 = function() { return "Hello World!"; } console.log(fun1()); // Hello World! 使用箭头函数() =>格式 fun2 = () => { return "Hello World!"; } console.log(fun2()); // Hell
【ES6】箭头函数
青山野火
02-25 1763
文章目录一、箭头函数是什么？二、用法详解1.箭头函数的参数2.箭头函数的函数体3.箭头函数与普通函数变量提升this的指向箭头函数不可以作构造函数不可以使用arguments对象总结 一、箭头函数是什么？ ES6 允许使用“箭头”（ => ）定义函数。 let foo = v => v; // 上面的箭头函数等同于： let foo = function(v) { return v; }; 箭头函数(=>）的左边是参数，右边是函数体。 二、用法详解 1.箭头函数的参数 当..
箭头函数
qq_44870324的博客
10-10 373
意义：箭头函数一般替代匿名函数。 箭头函数以箭头来区分和理解， 箭头左边是形参列表 ，箭头右边是函数体 注意：箭头函数传参时，一个参数时可以省略圆括号，多个参数时则不能省略圆括号。 // 例如 var f = a => {} var f = (a,b) =>{} 箭头函数有哪些特性? 1、箭头函数是匿名函数，不绑定自己的this,arguments,super,new,target ...
React的箭头函数详解
ZPHTTT的博客
12-07 9438
基本用法： ES6中允许使用“箭头”(=&gt;)定义函数 var f   = v =&gt; v; 上面代码相当于： var f = function( v )  {     return v; } 根据箭头函数有参数和无参数来区分 1、无参数的箭头函数 var f = () =&gt; 5; 等同于 var f = function() { return 5}; 2、有参数...
Angular 组件间传值|@Input&@Output|Subject
湾湾叉会儿腰的博客
10-18 1592
Angular 组件间传值一、@Input & @Output & EventEmitter二、基于 RxJs Subject 的组件间通信 一、@Input & @Output & EventEmitter 什么是 @Input？什么是 @Output？ @Input 是用于定于模块输入是用于父组件给子组件传值的。 @Output 是用于子组件给父组件传值的。@Output 将子组件中的属性标记为数据，从子组件传到父组件，并且使用该属性提出事件，从而通知父组件去
react事件传递参数的两种方式
小菜鸟的博客
09-24 3054
react事件传递参数的两种方式 因为react不是跟vue一样直接在事件里面传递参数就可以 见下图 这样你跟本就不需要点击他就立即执行了，所以如果要在事件里面传参我目前已知的有两种方法 第一种通过bind强制绑定this 注意：这里的话第一个参数必须是this因为这里有个隐式绑定this的缘故，bind默认的第一个参数是触发者本身的元素或者事件 如果传入一个参数。那么接收的只有一个参数那么这个参数就是触发者的元素或者事件 如果传入两个参数，接收一个参数，那么这个参数就是你传入的第二个参数（隐式
react函数组件div点击事件参数e打印是undefined怎么办
05-31
在 React 函数组件中，事件参数 e 是由 React 自动传递给事件处理函数的，在事件处理函数中可以直接使用。如果你的代码中 e 打印出来是 undefined，可能是以下几个原因： 1. 事件处理函数没有正确绑定 this 在事件处理函数中，如果需要使用组件实例的属性或方法，需要正确绑定 this。可以使用箭头函数或在构造函数中绑定 this。例如： ``` class MyComponent extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e) { console.log(e); // 此时 e 不会是 undefined } render() { return <div onClick={this.handleClick}>Click me</div>; } } ``` 2. 事件处理函数没有接收参数 在事件处理函数中，如果没有显式声明参数，e 就会是 undefined。可以通过以下方式解决： ``` class MyComponent extends React.Component { handleClick = (e) => { console.log(e); // 此时 e 不会是 undefined } render() { return <div onClick={this.handleClick}>Click me</div>; } } ``` 或者： ``` class MyComponent extends React.Component { handleClick(e) { console.log(e); // 此时 e 不会是 undefined } render() { return <div onClick={(e) => this.handleClick(e)}>Click me</div>; } } ``` 以上两种方式都可以确保事件处理函数接收到事件参数 e。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值