脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React事件绑定

React事件绑定详解

 更新时间：2021年12月16日 17:09:25   作者：Fx_cap  
这篇文章主要为大家介绍了React事件绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
  • 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'))

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • React路由的history对象的插件history的使用解读

    React路由的history对象的插件history的使用解读

    这篇文章主要介绍了React路由的history对象的插件history的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React 实现拖拽功能的示例代码

    React 实现拖拽功能的示例代码

    这篇文章主要介绍了React 实现拖拽功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React+Typescript项目环境搭建并使用redux环境的详细过程

    React+Typescript项目环境搭建并使用redux环境的详细过程

    这篇文章主要介绍了React+Typescript项目环境搭建并使用redux环境的详细过程,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • react中多个页面,数据相互依赖reducer问题及解决

    react中多个页面,数据相互依赖reducer问题及解决

    文章介绍了一个电商商品管理页面的复杂状态管理场景,使用useReducer或useImmerReducer来集中管理状态,避免组件间直接监听,简化联动逻辑,防止死循环,并便于维护和扩展
    2025-12-12
  • 详解Ref在React中的交叉用法

    详解Ref在React中的交叉用法

    众所周知，react推出了hooks之后，很多项目就开始往hooks上靠拢，所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西
    2021-06-06
  • useState 解决文本框无法输入的问题详解

    useState 解决文本框无法输入的问题详解

    这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • React生命周期函数图解介绍

    React生命周期函数图解介绍

    生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法
    2022-11-11
  • react打包优化和本地预览的实现

    react打包优化和本地预览的实现

    本文主要介绍了react打包优化和本地预览的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-07-07
  • vite+react+tailwindcss的简单使用方式

    vite+react+tailwindcss的简单使用方式

    这篇文章主要介绍了vite+react+tailwindcss的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React中useCallback useMemo使用方法快速精通

    React中useCallback useMemo使用方法快速精通

    在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender
    2023-02-02

最新评论