react组件事件绑定、获取事件对象及传递额外参数

最新推荐文章于 2025-06-09 21:42:18 发布

Y200195

最新推荐文章于 2025-06-09 21:42:18 发布

阅读量1.2k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： react 文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/Y200195/article/details/135757084

react 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了JavaScript中函数组件和类组件的事件绑定方法，包括如何在函数组件中使用`this`和直接绑定事件处理函数，以及如何在类组件中正确处理事件并传递额外参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、函数组件事件绑定、获取事件对象

语法：

on + 事件名称 = { 事件处理程序 } ，比如：<div onClick={ onClick }></div>

1、事件绑定

// 函数组件
function Hello(){
  const clickHe = () => {
    console.log('函数组件事件！')
  }
  return <div onClick={clickHe}>Hello</div>
}

function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

2、获取事件对象

// 函数组件
function Hello(){
  const clickHe = (e) => {
    // 阻止默认行为
    e.preventDefault()
    console.log('函数组件事件！',e)
  }
  return <div>
    <a onClick={clickHe} href="http://baidu.com">百度</a>
  </div>
}

function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

二、类组件事件绑定、获取事件对象

1、事件绑定

要借助关键词this获取

import React from "react";
// 类组件
class HelloComponent extends React.Component{
  // 事件回调函数(标准写法 避免this指向问题)
  clickHander = () => {
    console.log('类组件事件！')
  }
  render() {
    return <div onClick={this.clickHander}>类组件</div>
  }
}
function App() {
  return (
    <div className="App">
      <HelloComponent/>
    </div>
  );
}

export default App;

2、获取事件对象

import React from "react";

// 类组件
class HelloComponent extends React.Component{
  clickHander = (e) => {
    console.log('类组件事件！',e)
  } 
  render() {
    return <div onClick={this.clickHander}>类组件</div>
  }
}
function App() {
  return (
    <div className="App">
      <HelloComponent/>
    </div>
  );
}

export default App;

三、传递额外参数

// 函数组件
function Hello(){
  // 传递自定义参数
  const clickDiv = (text) => {
    console.log('函数组件自定义参数事件',text)
  }
  // 事件对象及自定义参数传递
  const clickEDiv = (e,text) => {
    console.log('事件对象及自定义参数传递事件',e,text)
  }
  return <div>
    <div onClick={() => clickDiv('传递的数据1')}>传递自定义参数</div>
    <div onClick={(e) => clickEDiv(e,'传递的数据2')}>事件对象及自定义参数传递</div>
  </div>
}
function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;