热门标签 | 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社区 其它相关文章!


推荐阅读
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • CSS Border 属性:solid 边框的使用详解
    本文详细介绍了如何在CSS中使用solid边框属性,包括其基本语法、应用场景及高级技巧,适合初学者和进阶用户参考。 ... [详细]
  • 2023年,Android开发前景如何?25岁还能转行吗?
    近期,关于Android开发行业的讨论在多个平台上热度不减,许多人担忧其未来发展。本文将探讨当前Android开发市场的现状、薪资水平及职业选择建议。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
  • 解决Win10系统显示模糊问题的方法
    Windows 10作为一款深受用户喜爱的操作系统,提供了丰富的个性化设置选项,让每位用户都能根据个人偏好定制系统界面。然而,在进行个性化设置的过程中,有时会出现显示模糊的情况,影响用户体验。本文将详细介绍如何有效解决Win10系统显示模糊的问题。 ... [详细]
  • 拨打电话时遇到‘正在通话’或无人接听的情况解析及解决方法
    当您尝试联系他人时,可能会遇到电话提示‘正在通话’或是虽然接通但无人应答的情况。本文将详细解释可能的原因,并提供相应的解决策略。 ... [详细]
  • 本文详细介绍了在Windows系统中如何配置Nginx以实现高效的缓存加速功能,包括关键的配置文件设置和示例代码。 ... [详细]
  • 如何在PyCharm中配置Python脚本的默认模板
    本文介绍如何在PyCharm中设置Python脚本的默认模板,以便每次创建新的.py文件时自动填充预设内容,提高开发效率。 ... [详细]
  • 当需要确保对象的状态在创建后不可更改时,使用记录(Record)类型是一个理想的选择。本文探讨了如何通过记录类型实现对象的不可变性,并提供了一个简单的示例来说明其用法。 ... [详细]
  • 本文详细介绍了FLV播放器的构建过程,包括如何解析FLV标签并将这些标签传递给解码器,以及如何在Qt环境中注册共享指针的信号和槽机制。 ... [详细]
  • 团支部的概念及其职能
    本文详细介绍了团支部的基本概念、组织结构以及其在共青团体系中的重要职能。 ... [详细]
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社区 版权所有