面试题：React 事件委托中如何处理不同类型元素的事件

Question

在 React 项目里，假设页面上有多个不同类型的按钮（如普通按钮、提交按钮）和链接，都需要绑定点击事件。请阐述如何利用 React 的事件委托机制来处理这些不同元素的点击事件，并给出简单的代码示例。

Answer 1

事件委托机制原理

在 React 中，事件委托是指将事件处理程序绑定到父元素上，而不是每个子元素都绑定单独的事件处理程序。这样当子元素触发事件时，事件会冒泡到父元素，父元素的事件处理程序可以根据事件源（event.target）来判断是哪个子元素触发了事件，从而执行相应的逻辑。

实现步骤

1. 在父元素上绑定一个点击事件处理函数。
2. 在事件处理函数中，通过 event.target 判断触发事件的元素，并根据元素的特性（如 type、className 等）执行不同的逻辑。

代码示例

import React, { useState } from 'react';

const ButtonAndLinkContainer = () => {
  const [message, setMessage] = useState('');

  const handleClick = (event) => {
    if (event.target.tagName === 'BUTTON') {
      if (event.target.type === 'submit') {
        setMessage('提交按钮被点击');
      } else {
        setMessage('普通按钮被点击');
      }
    } else if (event.target.tagName === 'A') {
      setMessage('链接被点击');
    }
  };

  return (
    <div onClick={handleClick}>
      <button type="button">普通按钮</button>
      <button type="submit">提交按钮</button>
      <a href="#">链接</a>
      <p>{message}</p>
    </div>
  );
};

export default ButtonAndLinkContainer;

在上述代码中：

• ButtonAndLinkContainer 组件在 div 元素上绑定了 onClick 事件处理函数 handleClick。
• handleClick 函数根据 event.target 的 tagName 判断是按钮还是链接，对于按钮进一步根据 type 判断是普通按钮还是提交按钮，并设置相应的 message 状态。
• 最后在页面上显示不同操作对应的提示信息。