React中现有表格添加新行时onClick函数失效的解决方法

你遇到的核心问题是直接通过innerHTML操作DOM字符串，React的事件绑定基于虚拟DOM实现，这种原生DOM操作方式无法让React识别并绑定onClick函数，导致按钮的事件代码被当成普通文本显示。

React的核心是状态驱动视图，无需手动操作DOM，只需维护一个状态数组管理表格行，新增行就是往数组里添加数据，再通过map渲染所有行。这样新增行和原有行功能完全一致，代码也更易维护。

步骤1：定义状态存储开支数据 #

用useState定义数组状态，存储每一行的开支信息（id、名称、金额等）：

import { useState } from 'react';

function ExpenseTable() {
  // 初始化开支数据，包含初始行
  const [expenses, setExpenses] = useState([
    { id: 1, name: 'Food Expenses', amount: 0 }
  ]);

  // 增减金额的函数，通过id定位对应行
  const decrease_func = (id) => {
    setExpenses(prev => prev.map(item => 
      item.id === id ? {...item, amount: Math.max(0, item.amount - 1)} : item
    ));
  };

  const increase_func = (id) => {
    setExpenses(prev => prev.map(item => 
      item.id === id ? {...item, amount: item.amount + 1} : item
    ));
  };

步骤2：渲染表格行 #

通过map遍历expenses数组渲染每一行，按钮直接绑定对应函数：

// 添加新行的函数
  const add_Rg_expense = () => {
    const newId = expenses.length + 1;
    setExpenses(prev => [...prev, { id: newId, name: 'Food Expenses', amount: 0 }]);
  };

  return (
    <div>
      <table id="Rg_expenses_table">
        <tbody>
          {expenses.map(item => (
            <tr key={item.id} className="Rg_expenses_table_row">
              <td>{item.name}</td>
              <td>
                <button className="local_button" onClick={() => decrease_func(item.id)}>
                  -
                </button>
              </td>
              <td>{item.amount}</td>
              <td>Rs</td>
              <td>
                <button className="local_button" onClick={() => increase_func(item.id)}>
                  +
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={add_Rg_expense}>添加新开支行</button>
    </div>
  );
}

export default ExpenseTable;

方案优势 #

• 完全符合React状态驱动理念，避免原生DOM操作带来的状态与DOM不一致问题
• 新增行与原有行的事件绑定逻辑统一，不会出现函数失效或显示为文本的情况
• 代码逻辑清晰，状态变化可追踪，便于后续扩展（如修改开支名称、删除行等）

关于你尝试过的方法说明 #

• appendChild()/insertRow()这类原生DOM操作：React虚拟DOM与原生DOM分离，手动修改原生DOM会导致状态与实际DOM脱节，引发难以排查的bug
• 觉得state复杂：刚接触React可能会觉得状态管理有门槛，但这是React的核心模式，掌握后会比手动操作DOM高效得多，也更符合框架设计思想

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