如何在React或原生JS中正确处理动态创建元素的点击事件

import React from 'react';

export default function App() {
  // 模拟动态数据，例如从API获取的列表项
  const items = ['项目1', '项目2', '项目3'];

  // 定义事件处理器函数
  const handleRemoveItem = (itemToRemove) => {
    console.log(`正在移除: ${itemToRemove}`);
    // 在实际应用中，这里会更新组件的状态，从而触发重新渲染
    // 例如：setItems(prevItems => prevItems.filter(item => item !== itemToRemove));
  };

  return (
    <div className='container'>
      <h1>动态列表与事件处理</h1>
      {items.map((item) => (
        // 使用JSX渲染元素，并直接绑定事件
        <a 
          key={item} 
          href="#!" // 阻止默认的链接跳转行为
          onClick={() => handleRemoveItem(item)} // 使用箭头函数传递参数，或直接传递函数引用
          style={{ marginRight: '10px', cursor: 'pointer' }}
        >
          {item} <span style={{ color: 'red' }}>x</span>
        </a>
      ))}
      <p>请点击列表项旁边的 'x' 来测试事件。</p>
    </div>
  );
}

// 定义一个全局函数，或者确保函数在插入HTML时是可访问的
const removeQuestion = (id) => {
    console.log(`正在移除问题，ID: ${id}`);
};

const addDynamicButtons = () => {
    // 注意：这里的函数名 'removeQuestion' 必须在全局作用域中可访问
    // 如果函数不在全局，需要将其挂载到 window 对象上
    // window.removeQuestion = removeQuestion; 

    const removeBtn1 = `<a style="margin-right: 10px; cursor: pointer;" onclick="removeQuestion('q1')"> 移除问题1 </a>`;
    const removeBtn2 = `<a style="margin-right: 10px; cursor: pointer;" onclick="removeQuestion('q2')"> 移除问题2 </a>`;

    // 插入到DOM中
    document.body.insertAdjacentHTML('beforeend', removeBtn1);
    document.body.insertAdjacentHTML('beforeend', removeBtn2);
};

// 页面加载完成后调用函数
window.onload = addDynamicButtons;

const removeQuestionHandler = (event) => {
    const btn = event.target;
    console.log(`点击了按钮: ${btn.textContent.trim()}`);
    // 可以在这里执行移除操作，例如移除父元素
    // btn.parentNode.remove();
};

const addDynamicButtonsWithListeners = () => {
    const removeBtn1 = '<a class="dynamic-btn" style="margin-right: 10px; cursor: pointer;"> 移除按钮A </a>';
    const removeBtn2 = '<a class="dynamic-btn" style="margin-right: 10px; cursor: pointer;"> 移除按钮B </a>';

    document.body.insertAdjacentHTML('beforeend', removeBtn1);
    document.body.insertAdjacentHTML('beforeend', removeBtn2);

    // 获取所有带有特定类的动态按钮
    const dynamicButtons = document.querySelectorAll('.dynamic-btn');

    // 为每个按钮添加事件监听器
    dynamicButtons.forEach(btn => {
        btn.addEventListener('click', removeQuestionHandler);
    });
};

window.onload = addDynamicButtonsWithListeners;