耀极客论坛

 找回密码
 立即注册
查看: 523|回复: 0

React事件绑定详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:47:23 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了React事件绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
       
  • React事件绑定和原生DOM事件绑定相似   
  • 语法n+事件名={事件处理程序} 例如nClick={()=>{}}   
  • 注意:React事件采用驼峰命名法

类组件事件绑定
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. class App extends React.Component {
  4.   handleClick() {
  5.     console.log(111);
  6.   }
  7.   render() {
  8.     return (‹button onClick={this.handleClick} > 点我‹/button >)
  9.   }
  10. }
  11. ReactDOM.render(‹App />, document.getElementById('root'))
复制代码
函数组件事件绑定
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. function App() {
  4.   function handleClick() {
  5.     console.log(111);
  6.   }
  7.   // 函数组件内没有this,所以直接写函数名,不需要加 this.
  8.   return (‹button onClick={handleClick}>点我‹/button>)
  9. }
  10. ReactDOM.render(‹App />, document.getElementById('root'))
复制代码
总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:38 , Processed in 0.064690 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表