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 的事件委托机制,利用事件冒泡原理来实现事件代理。这样可以减少事件监听器的数量,并且提高性能。

相关推荐
excel12 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着12 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友14 小时前
什么是API签名?
前端·后端·安全
会豪16 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子16 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶16 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子16 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_16 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233316 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin16 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js