React事件绑定详解

2021-12-16 20:47:56 来源:易采站长站 作者:

React事件绑定详解,事件,绑定,组件,函数,驼峰

React事件绑定详解

易采站长站,站长之家为您整理了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事件绑定详解内容提出宝贵意见

微信扫一扫

易采站长站微信账号