React中动态生成DOM元素的onClick属性不生效该如何解决？

问题根因 #

• React使用合成事件系统，所有通过JSX声明的事件都会由React统一管理绑定，直接通过innerHTML插入的内联onClick属性不会被React识别，也不会完成事件绑定。
• 你拼接在字符串中的箭头函数本质是普通文本，渲染到DOM上只是一段字符串属性，浏览器不会将其解析为可执行的JavaScript函数，因此点击没有任何反应。
• 在React中直接调用insertRow、insertCell等原生DOM API操作DOM，不符合React声明式渲染的设计逻辑，容易出现状态和视图不同步、事件绑定失效等各类问题。

推荐解决方案（符合React开发规范） #

完全抛弃原生DOM操作逻辑，用React状态管理数据+JSX渲染视图，步骤如下：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 声明用户列表状态存储接口返回数据
  const [users, setUsers] = useState([]);

  // 定义删除用户方法
  const deleteUser = (e, userId) => {
    e.preventDefault();
    // 此处写你的删除逻辑
    console.log('删除用户ID：', userId);
  };

  useEffect(() => {
    // 你的ajax请求逻辑
    fetch('你的接口地址')
      .then(res => res.json())
      .then(res => {
        // 直接把接口数据存入状态，无需手动操作DOM
        setUsers(res.data.users);
        // 如果使用feather图标，数据更新后调用此方法渲染图标
        // feather.replace();
      })
  }, []);

  // 用JSX循环渲染表格内容
  return (
    <table>
      <thead>
        <tr>
          <th>用户ID</th>
          <th>用户名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {users.map(user => (
          <tr key={user.id}>
            <td>{user.u_id}</td>
            <td>{user.username}</td>
            <td>
              <a href="javascript:void(0)">
                <span data-feather="edit"></span>
              </a>
              <a href="javascript:void(0)" onClick={(e) => deleteUser(e, user.id)}>
                <span data-feather="trash"></span>
              </a>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

临时兼容方案（不推荐，仅适配现有写法） #

如果不想改动现有DOM操作逻辑，可以手动创建DOM元素，通过addEventListener绑定事件：

res.data.users.forEach(function (user) {
  let row = table.insertRow(rowcnt);
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  cell1.innerHTML = user.u_id;
  cell2.innerHTML = user.username;
  
  // 手动创建编辑按钮
  const editBtn = document.createElement('a');
  editBtn.href = 'javascript:void(0)';
  editBtn.innerHTML = '<span data-feather="edit"></span>';
  // 手动创建删除按钮
  const delBtn = document.createElement('a');
  delBtn.href = 'javascript:void(0)';
  delBtn.innerHTML = '<span data-feather="trash"></span>';
  // 绑定点击事件
  delBtn.addEventListener('click', (e) => deleteUser(e, user.id));

  cell3.appendChild(editBtn);
  cell3.appendChild(delBtn);
  rowcnt++;
});
// 所有DOM插入完成后调用feather.replace()渲染图标

内容的提问来源于stack exchange，提问作者Akhilesh