如何使用React从表中获取行数据？

import React, { useState, useRef } from 'react';

const Table = () => {
  const [selectedRow, setSelectedRow] = useState({}); // 存储选中行的数据
  const tableRef = useRef(null); // 表格的引用

  const handleRowClick = (rowIndex) => {
    const table = tableRef.current;
    const row = table.rows[rowIndex];
    const rowData = {};

    // 遍历行的子元素，获取每一列的数据
    Array.from(row.cells).forEach((cell, columnIndex) => {
      const columnName = table.rows[0].cells[columnIndex].textContent;
      rowData[columnName] = cell.textContent;
    });

    setSelectedRow(rowData);
  };

  return (
    <div>
      <table ref={tableRef}>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>25</td>
            <td>john@example.com</td>
            <td>
              <button onClick={() => handleRowClick(0)}>Get Data</button>
            </td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>30</td>
            <td>jane@example.com</td>
            <td>
              <button onClick={() => handleRowClick(1)}>Get Data</button>
            </td>
          </tr>
        </tbody>
      </table>

      <div>
        Selected Row Data:
        <pre>{JSON.stringify(selectedRow, null, 2)}</pre>
      </div>
    </div>
  );
};

export default Table;