如何在React.js中通过onClick事件更新react-table的单元格数据？

嘿，刚入门react-table是吧？我当初也卡在这个点上——这框架本身不直接帮你改单元格数据，得靠咱们自己维护state来实现，毕竟它是受控组件的思路嘛。给你改改你的代码，一步步来：

首先，你得确保表格的数据是存在组件的state里的，这样才能通过修改state来更新视图。然后咱们写个点击事件处理函数，找到对应的单元格数据并更新它。

修改后的完整代码示例 #

import { useTable } from 'react-table';
import { useState } from 'react';

function MyTable() {
  // 第一步：用state维护表格数据，这里模拟了初始数据，你换成自己的即可
  const [tableData, setTableData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 28 },
  ]);

  // 第二步：写点击单元格的处理函数
  const handleCellClick = (rowIndex, columnId, currentValue) => {
    // 自定义更新逻辑，这里举个「年龄加1」的例子，你可以改成自己需要的逻辑
    const updatedData = [...tableData];
    // 根据行索引和列id定位到要修改的数据
    updatedData[rowIndex][columnId] = currentValue + 1;
    // 更新state触发表格重新渲染
    setTableData(updatedData);
  };

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns: [ // 补上你之前缺失的列定义，react-table需要这个来映射数据
      { Header: 'ID', accessor: 'id' },
      { Header: '姓名', accessor: 'name' },
      { Header: '年龄', accessor: 'age' },
    ],
    data: tableData, // 将state里的数据传给useTable
  });

  return (
    <div>
      <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td 
                      {...cell.getCellProps()} 
                      // 第三步：绑定点击事件，传入必要参数
                      onClick={() => handleCellClick(row.index, cell.column.id, cell.value)}
                    >
                      {cell.render('Cell')}
                    </td>
                  )
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  );
}

export default MyTable;

关键逻辑拆解 #

• 维护数据state：表格数据存在tableData这个state里，所有更新操作都通过setTableData完成——这是react-table更新视图的核心逻辑。
• 点击处理函数：handleCellClick里先复制原数据（避免直接修改state引发问题），再通过row.index（行的索引）和cell.column.id（列的唯一标识）定位到目标单元格，修改后更新state。
• 绑定点击事件：在td的onClick回调里传入需要的参数，触发处理函数即可。

如果你的更新逻辑更复杂（比如弹出输入框让用户手动输入新值），只需要修改handleCellClick里的逻辑就行——比如改成弹出模态框，用户输入完成后再更新state，原理是完全一致的。

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