首页 > 其他分享 >事件绑定

事件绑定

时间:2024-07-17 11:18:52浏览次数:22  
标签:clickHandler function const log 绑定 事件 click

1.React中的事件绑定,通过语法 on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法

function App(){
  const clickHandler = ()=>{
    console.log('button按钮点击了')
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

2.事件参数,在事件回调函数中设置形参e即可

function App(){
  const clickHandler = (e)=>{
    console.log('button按钮点击了', e)
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

3.自定义参数,需要改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参,不能直接写函数调用,这里事件绑定需要一个函数引用

function App(){
  const clickHandler = (name)=>{
    console.log('button按钮点击了', name)
  }
  return (
    <button onClick={()=>clickHandler('jack')}>click me</button>
  )
}

4.同时传递事件参数和自定义参数

function App(){
  const clickHandler = (name,e)=>{
    console.log('button按钮点击了', name,e)
  }
  return (
    <button onClick={(e)=>clickHandler('jack',e)}>click me</button>
  )
}

标签:clickHandler,function,const,log,绑定,事件,click
From: https://www.cnblogs.com/zhaohaha/p/18306904

相关文章

  • DevExpress WPF中文教程 - 为项目添加GridControl并将其绑定到数据
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品,还是以数据为中心......
  • vue基础day01(MVVM、绑定、事件、结构模板)
    vue基础一、什么是vue构建用户界面的渐进式框架,采用自底向上逐层应用开发核心理念:数据驱动视图,组件化开发二、框架和库的区别框架:一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,需要重新架构整个项目库:提供了一个小的功能,对项目的侵入性较小,如果某个库无......
  • 支付宝小程序踩坑---父组件给子组件传值时,事件名必须以on开头?
    遇到了一个坑,当我让父组件给子组件传值的时候,传普通的变量也就算了,用花括号一包就行了,但是我的方法为啥传过去就成了字符串。我真的试了半天,怎么都不好使,我就睡下了,早上又看了一下,发现其他的方法名传过去都有一个共同的特性就是要以on开头,索性我也试一下吧,结果怎么着,真的传过去......
  • ActiViz实战:ActiViz中的自己实现鼠标双击事件
    文章目录1、添加鼠标事件2、网上实现双击事件的方式3、增加双击的时间限制4、补充说明1、添加鼠标事件  已知在C#中观察者/命令模式会报错,正常添加鼠标事件如下:privatevoidVtkInteractorStyleTest(){vtkInteractorStylestyle=vtkInteractorS......
  • windows无法绑定端口,但是使用netstat无法查到占用进程
    windows无法绑定端口,但是使用netstat无法查到占用进程内容来源https://stackoverflow.com/questions/58216537/what-is-administered-port-exclusions-in-windows-10本文章只对该链接内容做简单的提取,总结。如果无法解决建议翻阅原文。windows保留端口查看保留端口。如果你......
  • 自定义localStorage监听事件
    一、问题在项目开发过程中,发现有很多时候进行localStorage.setItem()操作设置本地存储后,页面必须刷新才能够获取到存储数据,而有些时候本地缓存更新后,页面无法通过再次刷新以获取本地缓存,这就导致依赖本地缓存的数据无法进行更新。为了解决这个问题,就必须要用到自定义localStorage......
  • SOMEIPSRV_SD_MESSAGE_17: 订阅事件组否定确认条目类型
    测试目的:验证当SubscribeEventgroup请求中的实例ID未知时,DUT能否正确发送SubscribeEventgroupNegativeAcknowledgment消息。描述本测试用例旨在检查DUT在接收到包含未知实例ID的SubscribeEventgroup请求时,是否能够返回一个带有正确字段值的SubscribeEventgroupNeg......
  • 安卓避免点击事件重复触发
    背景:在安卓开发过程中,点击事件的处理是无可避免的,我们希望的是,用户点击一次,我们实现对应的一次点击事件,但是用户的操作是不可预估的,有时候往往会出现连点的情况,而我们又不希望同一事件短时间内重复触发。实现:publicabstractclassOnSingleClickListenerimplementsVie......
  • d3.js生成知识图谱--实现节点的颜色分类,节点点击事件处理
    首先看一下节点的数据内容:nodes:[{id:1,name:'刘备',type:'皇上'},{id:2,name:'关羽',type:'将军'},{id:3,name:'张飞',type:'将军'},{id:4,name:'诸葛亮',type:......
  • Springboot 校园安全通事件报告小程序-计算机毕业设计源码02445
    Springboot校园安全通事件报告小程序系统摘 要随着中国经济的飞速增长,消费者的智能化水平不断提高,许多智能手机和相关的软件正在得到更多的关注和支持。其中,校园安全通事件报告小程序系统更是深得消费者的喜爱,它的出现极大地改善了消费者的生活质量,同时,它还创造了一种快......