react表格如何获取每行数据

获取 React 表格每行数据的方法

在 React 中，可以通过以下几种方式获取表格中每一行的数据：

通过事件处理函数传递行数据

在渲染表格行时，将行数据作为参数传递给事件处理函数：

const handleRowClick = (rowData) => {
  console.log(rowData);
};

return (
  <table>
    {data.map((row) => (
      <tr key={row.id} onClick={() => handleRowClick(row)}>
        <td>{row.name}</td>
        <td>{row.age}</td>
      </tr>
    ))}
  </table>
);

使用 ref 获取 DOM 元素数据

通过 ref 获取表格行的 DOM 元素，然后从中提取数据：

const rowRefs = useRef([]);

return (
  <table>
    {data.map((row, index) => (
      <tr 
        key={row.id} 
        ref={(el) => (rowRefs.current[index] = el)}
        onClick={() => console.log(rowRefs.current[index].dataset)}
        data-id={row.id}
        data-name={row.name}
      >
        <td>{row.name}</td>
        <td>{row.age}</td>
      </tr>
    ))}
  </table>
);

通过状态管理存储选中行

使用状态来跟踪当前选中的行：

const [selectedRow, setSelectedRow] = useState(null);

return (
  <table>
    {data.map((row) => (
      <tr 
        key={row.id}
        onClick={() => setSelectedRow(row)}
        style={{ backgroundColor: selectedRow?.id === row.id ? '#eee' : '' }}
      >
        <td>{row.name}</td>
        <td>{row.age}</td>
      </tr>
    ))}
  </table>
);

使用第三方表格库

许多 React 表格库（如 react-table、Material-UI Table）提供了内置的行数据获取方法：

import { useTable } from 'react-table';

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable({ columns, data });

return (
  <table {...getTableProps()}>
    <tbody {...getTableBodyProps()}>
      {rows.map((row) => {
        prepareRow(row);
        return (
          <tr {...row.getRowProps()} onClick={() => console.log(row.original)}>
            {row.cells.map((cell) => (
              <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            ))}
          </tr>
        );
      })}
    </tbody>
  </table>
);

通过表单元素获取

如果表格包含可编辑的表单元素，可以通过表单提交获取所有行数据：

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const rowsData = data.map((row) => ({
    ...row,
    value: formData.get(`row-${row.id}`)
  }));
  console.log(rowsData);
};

return (
  <form onSubmit={handleSubmit}>
    <table>
      {data.map((row) => (
        <tr key={row.id}>
          <td>
            <input 
              name={`row-${row.id}`} 
              defaultValue={row.value} 
            />
          </td>
        </tr>
      ))}
    </table>
    <button type="submit">提交</button>
  </form>
);

选择哪种方法取决于具体需求，简单交互可以直接传递行数据，复杂场景可能需要结合状态管理或使用专门的表格库。