react事件传递参数的两种方式

已于 2022-05-24 16:28:31 修改
阅读量3k 收藏
点赞数 2
分类专栏： React 文章标签： react.js
于 2021-09-24 17:28:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48255917/article/details/120458535
版权

react事件传递参数的两种方式

因为react不是跟vue一样直接在事件里面传递参数就可以 见下图
在这里插入图片描述
在这里插入图片描述

这样你跟本就不需要点击他就立即执行了，所以如果要在事件里面传参我目前已知的有两种方法

第一种通过bind强制绑定this

在这里插入图片描述

注意：这里的话第一个参数必须是this因为这里有个隐式绑定this的缘故，bind默认的第一个参数是触发者本身的元素或者事件
如果传入一个参数。那么接收的只有一个参数那么这个参数就是触发者的元素或者事件
如果传入两个参数，接收一个参数，那么这个参数就是你传入的第二个参数（隐式传参）第一个参数默认给你隐藏了
如果传入两个参数，接收两个参数，那么第一个参数是你传入的参数，第二个参数才是触发者的元素或者事件

在这里插入图片描述
在这里插入图片描述
其余的情况可以自己去尝试 一般使用第二种隐式传参
在这里插入图片描述
在这里插入图片描述

第二种传参箭头函数

因为箭头函数this绑定的是上一层
在这里插入图片描述

这里传参没甚讲究，传入的是什么接收的就是什么

小菜鸟学代码··
关注
专栏目录
【学习】：React的触发函数参数包括事件对象e和其他参数的情况
CSmengy473的博客
09-26 1360
React的触发函数参数包括事件对象e和其他参数的情况 写一个函数，同时传递事件对象和一个自定义参数。 分为两种情况的函数写法和函数调用：箭头函数、普通函数 每种函数写法也对应着 仅有事件对象/事件对象+自定义参数的情况 对于传递事件对象和其他参数的函数，可以最后追加一个参数，即可接收event。 文章目录React的触发函数参数包括事件对象e和其他参数的情况一、箭头函数1.只有event事件对象2.event事件对象+自定义参数二、普通函数1.只有event事件对象2.event事件对象+自定义参数三、
React中如何在事件处理的时候传参（详解）
weixin_46726346的博客
09-09 3152
/执行代码 } button onClick = {但是如果有Vue的基础，可以很清楚的看到二者的区别。在Vue中，我们可以直接给fn传递参数。//执行代码 console . log(value) } button onClick = {你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。
React进行事件传参
weixin_44824839的博客
07-17 741
向事件处理程序传递参数，有两种方式： 一种是箭头函数方式：回调形式传参，另一种时function方式：bind()形式传参 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> 示例代码如下： changeOne = (e,title) =
Vue从入门到精通全网最强保姆级教程(持续更新中)
最新发布
2301_81007211的博客
08-04 1231
Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架。
react的事件传参的方式
qg2276879379的博客
08-11 274
事件的几种传参方式 简单案例：效果为点击按钮改变counter的值 import React, { Component } from 'react' export default class App extends Component { state = { counter: 1 } handelAddClick = (step) => { this.setState({ counter: this.state.coun
react事件传参
热门推荐
吴小迪的博客
05-11 3万+
React触发事件的时候如何传参？ 第一种方法使用箭头函数将其包裹起来： //在上面自定义的方法 test = (name) => { console.log(name) } //在render里面的代码 <button onClick={() => this.test('wuXiaoDi')} /> 第二种方法使用bind //在上面自定义的方法 test = ...
React几种传递参数的方法
qq_34153210的博客
05-13 9523
1.父组件向子组件传参 回调函数也是参数的一种，也可以传给子组件，达到子组件控制父组件的目的 import React from 'react'; import ReactDOM from 'react-dom'; function Son(props) { return <div>父组件的名称是{props.name}</div> } function Father(props) { return ( <Son name="Father"/> );
浅谈React Native 传参的几种方式(小结)
10-16
本文将详细讨论React Native中两种常见的传参方式：React Navigation导航传值和DeviceEventEmitter触发事件并传值。 首先，React Navigation是React Native中常用的导航库，它提供了一种优雅的方式来管理页面间的...
React 事件处理
12-13
在这两种情况下，React事件对象`e`将作为第二个参数传递给事件处理函数。对于箭头函数，需要显式传递`e`，而对于`bind`，`e`以及其他任何绑定的参数都将自动传递。为了优化性能，避免不必要的重新渲染，通常推荐在...
react hooks传递参数
05-28
React hooks 可以通过两种方式传递参数： 1. 使用 useState hook useState hook 可以接收一个初始值参数，这个参数可以是任何类型的值，包括对象和数组。例如，以下代码展示了如何使用 useState hook 创建一个...
addeventlistener事件参数_「React进阶系列」史上最全React事件机制详解
weixin_39648492的博客
11-21 1718
框架总览 DOM事件流的三个阶段 关于React事件的疑问 React事件绑定机制 React事件和原生事件有什么区别 React事件和原生事件的执行顺序，可以混用吗 React事件如何解决跨浏览器兼容 React stopPropagation 与 stopImmediatePropagation 从React的事件机制源码看整个流程 基本流程 事件注册 事件触发 总结 站在巨人肩上DOM事件...
react事件中怎么传参？修改this指向？
weixin_62460148的博客
07-27 443
react事件中如何传参以及在react事件中this为undefined如何解决
React如何进行事件传参
xiaozhen0610的博客
07-17 700
今天在学习React的es6语法的时候，发现了个有趣的现象，就是this的指向问题。es6的this不同于es5，它在创立函数伊始便已经存在了，而不是像es5一样，睡调用的函数，this指向谁。但是这也产生了一个令人头疼的问题，当改变状态this.setState的时候，明显会报错，这是this指针的原因，那如何解决呢？只需要通过在调用函数的时候绑定this或者穿个e获取即可，即： <button onClick={this.openSwitch.bind(this)}> please
react全局事件传递
qq_47872824的博客
01-29 1738
react之中实现兄弟组件的信息传输
React的事件传参
King的博客
08-24 181
事件传参 方式一：通过bind传参 handle=(a,b,event)=>{ console.log(a, b, event); } <button data-id="1001" onClick={this.handle.bind(this,1002,1003)}>点击</button> 方式二：通过箭头函数传参 handle=(a,b,event...
React基础-JSX事件绑定-事件传参
m0_71485750的博客
09-19 1万+
原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数;而它内部调用时，并不知道要如何绑定正确的this;
react 点击事件传参
名人卷耶
06-16 2770
方法1 <button onClick={(e)=> this.deleteRow( id, e )}>方法1</button> 方法2 <button onClick={ this.deleteRow.bind( this, id)}>方法2</button> 上述两种方式是等价的。 上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对
React-属性传值（传事件）
wa2661391317的博客
02-27 689
1.给事件传递一个参数 2.使用属性传值传递一个函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小菜鸟学代码··

给打赏的我会单独一对一讲解

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值