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

相关推荐
墨鸦_Cormorant2 分钟前
Vue 概述以及基本使用
前端·javascript·vue.js
JarvanMo15 分钟前
10 个能帮你节省大量开发时间的低估 Flutter 组件
前端
去伪存真19 分钟前
公司前端项目ESLint规则集统一化
前端
鹏多多22 分钟前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
w2vmany23 分钟前
postmessage xss初步学习
前端·学习·xss
小张成长计划..1 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
IT_陈寒1 小时前
Vue3性能优化实战:这7个技巧让我的应用加载速度提升50%!
前端·人工智能·后端
西西学代码1 小时前
Flutter---音效模式选择器
前端·html
TLucas1 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
艾小码2 小时前
告别页面呆板!这5个DOM操作技巧让你的网站活起来
前端·javascript