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

使用React从表中获取行数据可以通过以下步骤实现：

在React组件中创建一个表格，并确保每一行都有一个唯一的标识符，例如使用行的索引或ID。
在表格中的每一行中添加一个按钮或链接，用于触发获取行数据的操作。
在React组件的状态中创建一个空对象，用于存储选中行的数据。
在按钮或链接的点击事件处理程序中，获取当前行的数据，并将其存储在状态对象中。
可以使用React的ref属性来获取表格中的行元素，然后通过遍历行元素的子元素来获取每一列的数据。

以下是一个示例代码：

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;

在上面的示例中，我们创建了一个简单的表格，每一行都有一个"Get Data"按钮。当点击按钮时，会调用handleRowClick函数，并传递行的索引作为参数。在handleRowClick函数中，我们使用tableRef引用获取表格元素，然后通过遍历行的子元素来获取每一列的数据。最后，将获取到的行数据存储在selectedRow状态对象中，并在页面上显示出来。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。