React 组件中怎么做事件代理

在 React 组件中使用事件代理可以使用以下方法:

  1. 使用 on 方法来绑定事件监听器:
jsx 复制代码
class MyComponent extends React.Component {
  handleClick(event) {
    if (event.target.tagName === 'BUTTON') {
      console.log('Button clicked');
    }
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <button>Click me</button>
      </div>
    );
  }
}

在上述例子中,handleClick 方法被绑定到父级 div 元素的 onClick 事件上。当点击 button 元素时,事件会冒泡到父级 div 元素,从而触发 handleClick 方法。然后可以通过 event.target 来判断点击的元素是否是 button 元素。

  1. 使用条件渲染来为不同的元素绑定不同的事件:
jsx 复制代码
class MyComponent extends React.Component {
  handleClick(buttonType) {
    console.log(`${buttonType} clicked`);
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick('Button 1')}>Button 1</button>
        <button onClick={() => this.handleClick('Button 2')}>Button 2</button>
      </div>
    );
  }
}

在上述例子中,通过使用箭头函数,在每个 button 元素的 onClick 属性中调用不同的 handleClick 方法,并传递不同的参数。

这些方法都是使用了 React 的事件委托机制,利用事件冒泡原理来实现事件代理。这样可以减少事件监听器的数量,并且提高性能。

相关推荐
安替-AnTi16 分钟前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
Rrvive19 分钟前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾19 分钟前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api
極光未晚21 分钟前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆22 分钟前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
uu_code00726 分钟前
Android接入Pixelfree美颜SDK技术指南
前端
小鱼小鱼干27 分钟前
使用 ESLint 实现 Git Commit 前的语法检查
前端
用户92724725021927 分钟前
PHP + CSS + JS 数据采集与展示系统
javascript
码哥DFS43 分钟前
Flex布局原理
前端·css·css3
小样还想跑1 小时前
axios无感刷新token
前端·javascript·vue.js