我是靠谱客的博主 优秀烤鸡,最近开发中收集的这篇文章主要介绍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事件绑定详解的全部内容,希望文章能够帮你解决React事件绑定详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(124)

评论列表共有 0 条评论

立即
投稿
返回
顶部