当前位置: 首页 > news >正文

react 向事件处理程序传递参数

通常我们会为事件处理程序传递额外的参数。例如,若是 id 是一个内联 id,以下两种方式都可以向事件处理程序传递参数:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的,分别通过 arrow functions 和 Function.prototype.bind 来为特定事件类型添加事件处理程序。

上面两个例子中,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是,通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面,例如:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

相关文章:

  • react 有状态组件 切换登陆和未登录状态以及UI展示
  • 整合SE J2ME SDK与eclipse开发环境
  • MP3在Sony Ericsson K700上的音响效果
  • K700之图像内存处理
  • react 隐藏组件 阻止渲染
  • react 数组map方法转化列表
  • 使用索爱V800开发流媒体应用程序
  • 读取索爱手机固件版本信息和IMEI号
  • react jsx中使用map
  • 在基于MIDP的应用程序上使用JDBC
  • react 表单使用受控组件的思想
  • 索爱部分机型支持同时播放多个声音
  • react状态提升 两个子组件状态共享 让子组件状态提升 通过公有父组件props的方法传递回调函数执行改变( handleChange(e) { // 之前的代码: this.setSt)
  • SonyEricsson发布更好支持企业级应用的新JSR
  • react 状态提升的总结
  • 分享的文章《人生如棋》
  • 自己简单写的 事件订阅机制
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 【编码】-360实习笔试编程题(二)-2016.03.29
  • 【剑指offer】让抽象问题具体化
  • 2018一半小结一波
  • Fastjson的基本使用方法大全
  • fetch 从初识到应用
  • JS进阶 - JS 、JS-Web-API与DOM、BOM
  • LeetCode18.四数之和 JavaScript
  • Python - 闭包Closure
  • STAR法则
  • Web设计流程优化:网页效果图设计新思路
  • 半理解系列--Promise的进化史
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 目录与文件属性:编写ls
  • 实现菜单下拉伸展折叠效果demo
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • $(selector).each()和$.each()的区别
  • (06)Hive——正则表达式
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (九)One-Wire总线-DS18B20
  • (利用IDEA+Maven)定制属于自己的jar包
  • (转)微软牛津计划介绍——屌爆了的自然数据处理解决方案(人脸/语音识别,计算机视觉与语言理解)...
  • *p=a是把a的值赋给p,p=a是把a的地址赋给p。
  • .net framework4与其client profile版本的区别
  • .net/c# memcached 获取所有缓存键(keys)
  • .NET4.0并行计算技术基础(1)
  • .net反编译工具
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • @WebServiceClient注解,wsdlLocation 可配置
  • [ C++ ] 继承
  • [.net 面向对象程序设计进阶] (19) 异步(Asynchronous) 使用异步创建快速响应和可伸缩性的应用程序...
  • [3D游戏开发实践] Cocos Cyberpunk 源码解读-高中低端机性能适配策略
  • [AUTOSAR][诊断管理][ECU][$37] 请求退出传输。终止数据传输的(上传/下载)
  • [c++] C++多态(虚函数和虚继承)
  • [codevs1288] 埃及分数
  • [Design Pattern] 工厂方法模式
  • [EMWIN]FRAMEWIN 与 WINDOW 的使用注意