热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

react如何写点击事件

react写点击事件的方法:1、使用bind绑定,代码为【this.clicked.bind(this,"helloworld")】;2、使用箭头函数,代码为【onClick{(event)>this.clicked("hello】。

react写点击事件的方法:1、使用bind绑定,代码为【this.clicked.bind(this,"hello world")】;2、使用箭头函数,代码为【OnClick={(event)=>this.clicked("hello】。

react写点击事件的方法:

1、bind绑定

第一个参数指向this,第二个参数开始才是事件函数接收到的参数,事件对象event默认是最后一个参数。

...
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}
render(){
    return (
        
            
        
    )
}
...

这里的话绑定this可以统一写,这样代码看起来整洁点。

...
constructor(props){
    super(props);
    this.state = {};
    this.checkMenu = this.checkMenu.bind(this);
}
clicked = (param)=>{
    return (event)=>{
        console.log(event.target.value); // 按钮
        console.log(param); // hello
    }
}
render(){
    return (
        
            
        
    )
}
...

2、箭头函数

箭头函数若要传事件对象event的话,需要在箭头函数中把event作为参数传递给触发的事件。

...
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}
render(){
    return (
        
            
        
    )
}
...

相关免费学习推荐:Javascript(视频)

以上就是react如何写点击事件的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • PHP中去除换行符的多种方法及应用场景
    本文将详细介绍在PHP中去除换行符的各种方法,并结合实际应用场景进行说明。通过本文,您将了解如何根据不同操作系统的特点,选择最合适的换行符处理方式。 ... [详细]
  • 牛鞭效应是供应链管理中的一个重要概念,也是经济学中的一个术语。它描述了从零售商到供应商的需求信息在传递过程中逐渐放大的现象,导致供应链各环节的库存波动和不确定性增加。本文将详细探讨这一效应及其应对策略。 ... [详细]
  • 使用Dreamweaver创建用户注册表单的详细步骤
    本文将详细介绍如何使用Adobe Dreamweaver创建一个功能完整的用户注册表单。通过本教程,您将掌握从插入表单元素到设置属性的每一个步骤,帮助您快速上手并完成高质量的网页设计。 ... [详细]
  • 本文探讨了《魔兽世界》中红蓝两方阵营在备战阶段的策略与实现方法,通过代码展示了双方如何根据资源和兵种特性进行战士生产。 ... [详细]
  • 本文详细介绍了MicroATX(也称Mini ATX)和MATX主板规格,探讨了它们的结构特点、应用场景及对电脑系统成本和性能的影响。同时,文章还涵盖了相关操作系统的实用技巧,如蓝牙设备图标删除、磁盘管理等。 ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 使用GDI的一些AIP函数我们可以轻易的绘制出简 ... [详细]
  • 本文探讨了如何在 PHP 的 Eloquent ORM 中实现数据表之间的关联查询,并通过具体示例详细解释了如何将关联数据嵌入到查询结果中。这不仅提高了数据查询的效率,还简化了代码逻辑。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 切比雪夫多项式
    本文主要介绍关于切比雪夫,多项式,矩阵的知识点,对【切比雪夫多项式】和【切比雪夫多项式零点公式】有兴趣的朋友可以看下由【voevie】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的【数学】相关技 ... [详细]
  • 本题探讨如何通过最大流算法解决农场排水系统的设计问题。题目要求计算从水源点到汇合点的最大水流速率,使用经典的EK(Edmonds-Karp)和Dinic算法进行求解。 ... [详细]
  • 本文详细介绍了如何在CAD中自定义快捷键,特别是F1到F12功能键及其组合键的设置方法,帮助用户提高绘图效率。 ... [详细]
  • 本文将详细介绍如何在Linux操作系统中执行PHP脚本,包括环境配置、命令使用及验证方法。对于需要在Linux环境下开发或部署PHP应用的用户来说,这是一篇非常实用的文章。 ... [详细]
  • 深入解析JMeter中的JSON提取器及其应用
    本文详细介绍了如何在JMeter中使用JSON提取器来获取和处理API响应中的数据。特别是在需要将一个接口返回的数据作为下一个接口的输入时,JSON提取器是一个非常有用的工具。 ... [详细]
author-avatar
原来那只是梦靥
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有