您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

React事件绑定详解

51自学网 2022-02-21 13:35:30
  javascript
  • 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'))

总结

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


下载地址:
vue-cli使用stimulsoft.reports.js的详细教程
JS生成唯一id方式之UUID和NanoID
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。