006-React事件处理

历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

事件绑定 事件对象

正文：

事件绑定

on事件名称={事件逻辑},如onClick={()=>{}}

事件采用小驼峰命名法

源码如下：

import React from 'react'
import ReactDOM from 'react-dom'


function clickMe()
{
  console.log("点我");
  
}


ReactDOM.render(
  <div onClick={clickMe}>点击</div>,
  document.getElementById('root')
)

如果在单文件组件中绑定事件源码如下

import React from 'react'


class App extends React.Component{
  clickMe()
  {
    console.log('点我');
  }
  render(){
    return(
      <button onClick={this.clickMe}>点我</button>
    )
  }
} 
export default App

事件对象

通过绑定的事件参数获取事件对象，在React中事件对象叫做合成事件(对象)

合成事件：兼容所有的浏览器，无需担心跨浏览器兼容性问题

import React from 'react'


class App extends React.Component{
  constructor(props:any)
  {
    super(props);
    this.click3 = this.click3.bind(this);
  }
  click1(msg:string)
  {
    console.log('点我1'+msg);
    console.log(this);
    
  }
  click2 = (msg:string)=>{
    console.log('点我2'+msg);
  }
  /**
   * 箭头函数
   * @param msg 参数
   */
  click3 = (msg:string)=>{
    console.log('点我2'+msg);
  }
  click4 = (e:React.MouseEvent<HTMLElement>)=>{
    console.log('点我2');
    console.log(e);
  }
  /**
   * 通过HTMLElement 事件参数 阻止a标签的页面跳转行为
   * @param e 获取HTMLElement 事件参数
   */
  click5 = (e:React.MouseEvent<HTMLElement>)=>{
    e.preventDefault();
    console.log("百度");
    
  }
  render(){
    return(
      <div>
        {/* 以下注释的代码是错误的 */}
        {/* <button onClick={this.click1('hello')}>点我3</button> */}
        <button onClick={this.click1.bind(this,'hello')}>点我1</button>
        <button onClick={this.click2.bind(this,'hello')}>点我2</button>
        <button onClick={()=>{this.click1('hello1')}}>点我1</button>
        <button onClick={this.click4.bind(this)}>点我4</button>
        <a href='https://www.baidu.com/' onClick={this.click5.bind(this)}>百度</a>
      </div>
    )
  }
} 
export default App

【文章导航】

https://blog.csdn.net/yy763496668/article/details/113117040

THANKS All !!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746