返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React事件绑定详解
  • 878
分享到

React事件绑定详解

2024-04-02 19:04:59 878人浏览 独家记忆
摘要

目录类组件事件绑定函数组件事件绑定总结 React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}

  • React事件绑定和原生DOM事件绑定相似
  • 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}}
  • 注意:React事件采用驼峰命名法

类组件事件绑定


import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  handleClick() {
    console.log(111);
  }
  render() {
    return (<button onClick={this.handleClick} > 点我</button >)
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

函数组件事件绑定


import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  function handleClick() {
    console.log(111);
  }
  // 函数组件内没有this,所以直接写函数名,不需要加 this.
  return (<button onClick={handleClick}>点我</button>)
}
ReactDOM.render(<App />, document.getElementById('root'))

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: React事件绑定详解

本文链接: https://lsjlt.com/news/160112.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • React事件绑定详解
    目录类组件事件绑定函数组件事件绑定总结 React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}...
    99+
    2024-04-02
  • React事件绑定的方式详解
    一、是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends...
    99+
    2024-04-02
  • React事件处理和表单的绑定详解
    目录一、事件处理1.1 React事件1.2 事件对象1.3 事件传参1.4 函数组件事件处理二、表单一、事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素...
    99+
    2024-04-02
  • 怎么进行React事件绑定
    本篇文章给大家分享的是有关怎么进行React事件绑定,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。类组件事件绑定import React from ...
    99+
    2023-06-22
  • 一文详解Vue-组件自定义事件(绑定和解绑)
    目录组件自定义事件(绑定)1 编写案例2 props实现3 自定义事件实现方式14 自定义事件实现方式25 只能触发一次事件6 多个参数传递组件自定义事件(解绑)1 解绑一个事件2 ...
    99+
    2023-05-18
    Vue-组件自定义事件 Vue-组件自定义 Vue-组件
  • React事件绑定的方式有哪些
    今天小编给大家分享一下React事件绑定的方式有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、是什么在react应用...
    99+
    2023-06-05
  • Vue之表单事件数据绑定详解
    <body> <div id="root"> <form action="" @submit.prevent="demo"...
    99+
    2024-04-02
  • React合成事件详解
    目录从点击输入框开始 扩展 点击输入框引起多个事件 为什么react中的input设置value后成为受控组件? 为什么合成事件属性有时无法访问? react如何模拟事件的阻止冒泡、...
    99+
    2024-04-02
  • React组件创建与事件绑定的实现方法
    目录1、组件创建方式方式一-函数创建组件方式二-使用类创建组件2、事件绑定方式一-类组件绑定事件方式二-函数组件绑定事件周末在家,练习React,记录下来,方便查看。 本期学习Rea...
    99+
    2022-12-26
    React组件创建 React事件绑定
  • jQuery中绑定事件的命名空间详解
    在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深...
    99+
    2022-11-21
    jQuery 绑定事件
  • Node.JS事件的绑定与触发示例详解
    目录简介绑定事件on()addListener()once()监听事件emit() 传参 删除事件removeListener()removeAllListene...
    99+
    2022-11-16
    node.js事件绑定 nodejs事件触发 node 事件
  • react关于事件绑定this的方式有哪些
    小编给大家分享一下react关于事件绑定this的方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在react组件中,每...
    99+
    2024-04-02
  • Vue中的事件绑定与解绑方式
    目录事件绑定基础知识使用场景注意事项v-on 绑定事件语法实例$ref绑定事件语法实例事件解绑语法实例 总结事件绑定 基础知识 使用场景 子组件==>父组件传数据在父...
    99+
    2022-11-13
    Vue 事件绑定 Vue 事件解绑 Vue 事件
  • jQuery中on绑定的事件怎么解绑
    这篇文章主要介绍了jQuery中on绑定的事件怎么解绑的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery中on绑定的事件怎么解绑文章都会有所收获,下面我们一起来看看吧。解绑单个事件在jQuery中,我们...
    99+
    2023-07-05
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解
    目录一、Vue的数据绑定二、Vue的事件绑定三、Class和Style的绑定一、Vue的数据绑定 1. 单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变...
    99+
    2023-01-14
    Vue数据绑定 Vue事件绑定 Vue Class和Style绑定
  • javascript怎么解除绑定事件
    小编给大家分享一下javascript怎么解除绑定事件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法:1、使用“对象名.onclick=null”语句;2、使...
    99+
    2023-06-14
  • Vue 事件处理函数的绑定示例详解
    目录正文Vue 的事件处理绑定事件修饰符按键修饰符Vue 为什么会在 HTML 中监听事件?正文 在 JS 中「事件」是不需要绑定的,浏览器自带了许多的事件,每个事件都可以去绑定「...
    99+
    2023-02-23
    Vue 事件处理函数绑定 Vue 函数绑定
  • Node.js中使用事件发射器模式实现事件绑定详解
    在Node里,很多对象都会发射事件。比如,一个TCP服务器,每当有客户端请求连接就会发射“connect”事件,又比如,每当读取一整块数据,文件系统就会发射一个“data”事件。这些对象在Node里被称为事...
    99+
    2022-06-04
    事件 发射器 绑定
  • jquery如何绑定事件
    jquery中绑定事件的方法有:1.使用on()函数绑定事件;2.使用bind()函数绑定事件;3.使用live()函数绑定事件;4.使用delegate()函数绑定事件;jquery中绑定事件的方法有以下几种使用on()函数绑定事件$(&...
    99+
    2024-04-02
  • jquery事件如何绑定
    本文小编为大家详细介绍“jquery事件如何绑定”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery事件如何绑定”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、bind()bing()用来绑定事件,例如...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作