react中从表格外部onClick获取当前table的所有数据

要从表格外部的`onClick`事件中获取当前表格的所有数据，可以采用以下步骤：

1. 在表格组件中，创建一个`ref`引用，用于获取表格的DOM节点：

import React, { useRef } from "react";

function Table() {
  const tableRef = useRef(null);

  return (
    <table ref={tableRef}>
      {/* 表格内容 */}
    </table>
  );
}

2. 在点击事件处理函数中，通过`tableRef.current`获取表格DOM节点，再通过`querySelectorAll`方法获取所有的`<tr>`元素：

function handleClick() {
  const rows = tableRef.current.querySelectorAll("tr");
  console.log(rows);
}

function Table() {
  const tableRef = useRef(null);

  return (
    <div>
      <button onClick={handleClick}>获取表格数据</button>
      <table ref={tableRef}>
        {/* 表格内容 */}
      </table>
    </div>
  );
}

3. 遍历`<tr>`元素，获取每行的数据：

function handleClick() {
  const rows = tableRef.current.querySelectorAll("tr");
  const data = [];

  rows.forEach((row) => {
    const rowData = [];
    row.querySelectorAll("td").forEach((cell) => {
      rowData.push(cell.textContent);
    });
    data.push(rowData);
  });

  console.log(data);
}

完整代码如下：

import React, { useRef } from "react";

function Table() {
  const tableRef = useRef(null);

  function handleClick() {
    const rows = tableRef.current.querySelectorAll("tr");
    const data = [];

    rows.forEach((row) => {
      const rowData = [];
      row.querySelectorAll("td").forEach((cell) => {
        rowData.push(cell.textContent);
      });
      data.push(rowData);
    });

    console.log(data);
  }

  return (
    <div>
      <button onClick={handleClick}>获取表格数据</button>
      <table ref={tableRef}>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>20</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>25</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}