react onclick传递参数

最新推荐文章于 2024-04-28 08:12:16 发布
最新推荐文章于 2024-04-28 08:12:16 发布
阅读量3.6k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/windseek/p/10186531.html
版权

最近在做react项目的时候，被一个小问题绊了一脚，记录一下

onClick 传入参数

onClick={e=>{this.Mallclose(e,index)}
onClick={this.Mallclose.bind(this,e,index)}
个人感觉不喜欢第二种方式，因为增加了语法上的复杂度
e是默认参数，不能使用(e, index) => {
}
 
额。。。。。原因很简单，传入参数只能是一个默认的，不能拆开，只可意味不可言传。。。

转载于:https://www.cnblogs.com/windseek/p/10186531.html

weixin_34209406
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React onClick/onChange 传参 （bind绑定）
专注基础架构领域
10-21 2965
一般是通过bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名，代码如下： //被触发函数写法： const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)} 有参调用，代码如下： //被触发函数写法： const onChange = (index, e) => { //操作 } 传值调用...
react----如何给react的onClick事件传递参数
weixin_38501752的博客
03-21 3720
react----如何给react的onClick事件传递参数 我用了第二种方法，穿了 button的key。 【转载保存】React的onClick事件传参有三种方法。 当时准备用点击事件传递参数给一个函数，但是一直找不到onClick事件传参的方法，原来是要绑定this,携带参数，遂找到这篇文章并保存在自己的博客 写法一 <Button onClick={this.delFolder.bind(this,“abc”)}> 定义delFolder方法 delFolder = (name,e)
React onClick 传递参数
datouniao1的博客
10-26 4790
背景说明 在下图这样的列表中，点击删除按钮需要执行删除操作 列表产生： { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( <Space size="middle"> <Button type="primary" size="small" >修改</Button> ..
react怎么做到点击传参
qq_60504665的博客
04-28 611
在React中，点击事件传参通常涉及到在事件处理函数中访问和使用传递的参数。
React的onClick点击事件传参三种写法
小权权的博客
12-28 4384
1、<Button onClick={this.delFolder.bind(this,"abc")}></Button> 定义delFolder方法 delFolder = (name,e)=>{ alert(name) } 用bind绑定，调用是作为第二个参数传递，不用显示传递事件对象，定义方法时，事件对象作为最后一个参数传入 2、<Button onClick={this.delFolder("abc")}></Button> 定义delFol
react中onClick事件传参
初心 - 杨瑞超个人博客
09-14 5097
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416 在我们实际开发中，单击事件传参也是经常用到的，下面我们来研究下传参问题。 正常绑定事件： &lt;button className="clear-completed" onClick={test()}&gt;点击&lt;/button&gt; 传递参数我们需要这样写： 错误写法： &l...
【React】onClick点击事件传参的4种方式
harmsworth的博客
03-29 1681
【代码】【React】onClick点击事件传参的4种方式。
React_native Navigator页面跳转组件参数传递
06-30
本篇将详细讲解如何利用`Navigator`进行页面跳转以及如何在跳转过程中传递参数。 一、安装和引入`Navigator` 首先，你需要安装`react-native-router-flux`库，它包含了一个简洁易用的`Navigator`实现。通过npm或...
react使用hashHistory实现类似get方法带参数跳转
01-08
import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }...
react-redux
04-04
在 React-Redux 中，store 可以通过 Provider 传递给整个应用，组件通过 connect() 来获取和更新状态。 ### 使用步骤 1. **安装**：首先需要通过 npm 或 yarn 安装 `react-redux`。 2. **创建 Store**：使用 ...
react路由配置方式详解
08-29
React 路由配置可以传递参数，例如在 URL 中传递参数。例如，在下面的代码中，我们使用 `:id` 来传递参数。 ```jsx ``` 在上面的代码中，我们使用 `:id` 来传递参数，例如 `/detail/1`、`/detail/2` 等。 React ...
React框架课程套装
最新发布
06-09
6. **事件处理**: 在React中，事件处理函数的写法与常规的JavaScript有所不同，需要在事件名前加上"on"前缀，例如`onClick`而不是`click`，并且函数绑定通常推荐使用箭头函数或者构造器中的`this.setState`绑定。...
React的onClick函数如何传参
热门推荐
qq_20337865的专栏
08-15 1万+
不能使用（参数A， 参数B）的方式，而是要使用bind &lt;Button onClick={this.showEdit.bind(this, 'add')}&gt;添加用户&lt;/Button&gt; showEdit = (type) =&gt; { console.log(type) // 这里面的type就是'add' this.setState({ mo...
React onClick点击事件传参三种写法
weixin_45936275的博客
03-09 3037
第一种 用bind绑定，调用是作为第二个参数传递，不用显示传递事件对象，定义方法时，事件对象作为最后一个参数传入 class Test extends React.Component{ constructor(props){ super(props) } render(){ return( <button onClick={this.getParame...
react 点击事件传参
名人卷耶
06-16 2738
方法1 <button onClick={(e)=> this.deleteRow( id, e )}>方法1</button> 方法2 <button onClick={ this.deleteRow.bind( this, id)}>方法2</button> 上述两种方式是等价的。 上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对
React中如何在事件处理的时候传参（详解）
weixin_46726346的博客
09-09 3095
/执行代码 } button onClick = {但是如果有Vue的基础，可以很清楚的看到二者的区别。在Vue中，我们可以直接给fn传递参数。//执行代码 console . log(value) } button onClick = {你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。
react 外部函数的引用以及onClick传递参数
well2049的博客
10-28 1万+
学习react  有一段时间了，还没有总结过自己的经验，其实也就是遇到的坑。现在就记录两个调出的坑。 第一个：就是在组件内使用外部模块或者组件的自定义的函数。 首先在当前组件内import外部组件。例如：import {savefunction} from './saveAjax'; 而这个saveAjax的模块里面就是我写的自定义的一个函数，以后肯定是封装的自己的方法，现在看个简单。就
react onClick 等函数传参
fortunegrant的博客
10-17 2322
不能使用（参数A， 参数B）的方式，而是要使用bind &lt;Button onClick={this.showEdit.bind(this, 'add')}&gt;添加用户&lt;/Button&gt; showEdit = (type,(event)) =&gt; { console.log(type) // 这里面的type就是'add' this.setState...
react onclick 传参数
06-10
在 React 中，你可以通过使用箭头函数或者 bind 方法来传递参数给 onClick 事件处理函数。 使用箭头函数： ```jsx <button onClick={() => handleClick(param)}>Click me</button> ``` 使用 bind 方法： ```jsx <button onClick={handleClick.bind(this, param)}>Click me</button> ``` 其中 `param` 是你想要传递的参数，`handleClick` 是处理点击事件的函数。在这两种方法中，`param` 都作为第一个参数传递给 `handleClick` 函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值