React及原生JavaScript中动态创建按钮的onClick事件处理详解

import React from 'react';

export default function App() {
  // 假设这是一个动态的数据源，代表要创建的按钮
  const buttonLabels = ['按钮A', '按钮B', '按钮C'];

  // 定义事件处理器函数
  const handleRemoveQuestion = (label) => {
    console.log(`点击了：${label}`);
    // 在这里可以执行移除逻辑，例如更新父组件的状态
  };

  return (
    <div className='container'>
      <h1>React动态按钮示例</h1>
      {/* 使用map方法遍历数组，为每个元素渲染一个按钮 */}
      {buttonLabels.map((label) => (
        <a 
          key={label} // 列表中每个元素都需要一个唯一的key属性
          href={'#!'} // 阻止默认的链接跳转行为
          onClick={() => handleRemoveQuestion(label)} // 使用箭头函数传递参数，或直接绑定函数引用
          style={{ margin: '5px', padding: '8px 12px', border: '1px solid blue', cursor: 'pointer' }}
        >
          {label}
        </a>
      ))}
    </div>
  );
}

const removeQuestion = () => {
  console.log('原生JS: 点击了按钮');
};

const addDynamicButtons = () => {
  // 错误示例：onClick={removeQuestion} 在原生HTML字符串中不会工作
  // const removeBtnBad = '<a style="margin:5px;" onClick={removeQuestion}> x (错误示例) </a>';

  // 正确示例：onClick="removeQuestion()" 确保函数被调用
  const removeBtn1 = '<a style="margin:5px; padding:8px 12px; border:1px solid green; cursor:pointer;" onClick="removeQuestion()"> 按钮1 </a>';
  const removeBtn2 = '<a style="margin:5px; padding:8px 12px; border:1px solid green; cursor:pointer;" onClick="removeQuestion()"> 按钮2 </a>';

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

// 页面加载后调用函数以添加按钮
document.addEventListener('DOMContentLoaded', addDynamicButtons);

const handleDynamicButtonClick = (event) => {
  console.log('原生JS: 通过addEventListener点击了按钮', event.target.textContent);
};

const addButtonsWithEventListener = () => {
  const btnHtml1 = '<a class="dynamic-btn" style="margin:5px; padding:8px 12px; border:1px solid orange; cursor:pointer;"> 按钮A (Event Listener) </a>';
  const btnHtml2 = '<a class="dynamic-btn" style="margin:5px; padding:8px 12px; border:1px solid orange; cursor:pointer;"> 按钮B (Event Listener) </a>';

  // 1. 插入HTML字符串
  window.document.body.insertAdjacentHTML('beforeend', btnHtml1 + btnHtml2);

  // 2. 获取新插入的元素并绑定事件
  // 注意：必须在元素被插入到DOM之后才能查询到它们
  document.querySelectorAll('.dynamic-btn').forEach(btn => {
    btn.addEventListener('click', handleDynamicButtonClick);
  });
};

document.addEventListener('DOMContentLoaded', addButtonsWithEventListener);

const parentContainer = document.createElement('div');
parentContainer.id = 'dynamic-button-container';
document.body.appendChild(parentContainer);

const addButtonsWithEventDelegation = () => {
  const btnHtml1 = '<a class="delegated-btn" style="margin:5px; padding:8px 12px; border:1px solid purple; cursor:pointer;"> 委托按钮X </a>';
  const btnHtml2 = '<a class="delegated-btn" style="margin:5px; padding:8px 12px; border:1px solid purple; cursor:pointer;"> 委托按钮Y </a>';

  parentContainer.insertAdjacentHTML('beforeend', btnHtml1 + btnHtml2);
};

// 将事件监听器绑定到父容器
parentContainer.addEventListener('click', (event) => {
  if (event.target.classList.contains('delegated-btn')) {
    console.log('原生JS: 通过事件委托点击了按钮', event.target.textContent);
    // 在这里执行特定按钮的逻辑
  }
});

document.addEventListener('DOMContentLoaded', addButtonsWithEventDelegation);