当前位置：首页 > React

react如何事件委托

2026-01-24 21:02:52React

事件委托的概念

事件委托是一种利用事件冒泡机制将子元素的事件处理程序绑定到父元素上的技术。在React中，通过利用合成事件系统（SyntheticEvent）可以高效实现事件委托，减少事件监听器的数量，提升性能。

React中实现事件委托的方法

将事件处理程序绑定到父元素
通过父元素的onClick（或其他事件）属性统一处理子元素的事件。父组件通过event.target识别实际触发事件的子元素，并执行对应逻辑。

function ParentComponent() {
  const handleClick = (event) => {
    if (event.target.tagName === 'BUTTON') {
      console.log('Button clicked:', event.target.textContent);
    }
  };

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

动态识别子元素
结合data-*属性或自定义属性（如data-id）更精确地识别目标元素，避免依赖标签名或类名。

function ListComponent() {
  const handleClick = (event) => {
    const itemId = event.target.dataset.id;
    if (itemId) {
      console.log('Item ID:', itemId);
    }
  };

  return (
    <ul onClick={handleClick}>
      <li data-id="1">Item 1</li>
      <li data-id="2">Item 2</li>
    </ul>
  );
}

注意事项

事件冒泡：React的合成事件会自动冒泡，无需手动调用stopPropagation()，除非需阻止默认行为。
性能优化：适用于动态列表或大量子元素场景，减少重复绑定事件的开销。
兼容性：确保事件目标（event.target）是预期的DOM元素，可通过event.currentTarget获取绑定事件的父元素。

动态列表中的事件委托示例

在渲染动态列表时，事件委托能显著简化代码：

react如何事件委托

function DynamicList() {
  const items = [{ id: 1, text: 'Apple' }, { id: 2, text: 'Banana' }];

  const handleClick = (event) => {
    const itemId = parseInt(event.target.dataset.id);
    const selectedItem = items.find(item => item.id === itemId);
    if (selectedItem) {
      console.log('Selected:', selectedItem.text);
    }
  };

  return (
    <ul onClick={handleClick}>
      {items.map(item => (
        <li key={item.id} data-id={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}