如何在 React-Table 上获取单元格值？

React-Table 是一个强大的用于展示和操作数据表格的 React 库。获取单元格值是针对某些具体场景进行操作的，因此本文将探讨以下三种获取单元格值的场景。

场景一：在单元格渲染时获取单元格值

渲染表格的过程中，我们经常需要修改单元格的样式或者渲染一些特殊的元素。此时，我们可以通过 React-Table 提供的 row 和 column 属性来获取单元格的值。

<ReactTable
    data={data}
    columns={columns}
    getTdProps={(state, rowInfo, column) => {
        return {
            onClick: () => {
                console.log(rowInfo.original[column.id])
            }
        }
    }}
/>

在上面的例子中，getTdProps 参数传入一个回调函数，当用户点击单元格时，会触发该回调函数。该回调函数中使用 rowInfo.original[column.id] 获取单元格的值。

场景二：在表单提交时获取特定行的单元格值

在表单提交时，我们可能需要收集某些特定行的单元格值。在 React-Table 中，“表单提交”常常表现为“批量选择”，我们可以通过 getTrProps 和 state.selectedRows 属性来获取所选行的数据。

const submitForm = () => {
    const selectedRows = state.selectedRows.map(row => row.original)
    const cellValues = selectedRows.map(row => row[column.id])
    console.log(cellValues)
}

<ReactTable
    data={data}
    columns={columns}
    getTrProps={(state, rowInfo) => {
        return {
            onClick: () => {
                const rowSelected = state.selectedRows.find(r => r.id === rowInfo.original.id)
                if (rowSelected) {
                    state.selectedRows = state.selectedRows.filter(r => r.id !== rowInfo.original.id)
                } else {
                    state.selectedRows.push(rowInfo)
                }
            },
            style: {
                background: state.selectedRows.find(r => r.id === rowInfo.original.id) ? 'lightblue' : 'white'
            }
        }
    }}
/>

在上面的例子中，我们将 selectedRows 设置为全局状态，在 getTrProps 回调函数中处理行的选中操作，并通过 style 属性将选中行的背景色标记为“浅蓝色”。

用户点击表格的行时，如果已经选中该行，则从 selectedRows 中删除该行；否则，将该行添加到 selectedRows 中。

当用户点击表单提交按钮时，将 selectedRows 中的数据转换为相应列的单元格值，并输出到控制台。

场景三：在表格中过滤数据并获取过滤后的单元格值

React-Table 可以通过 filterable 属性实现首屏数据加载后的表格快速过滤。在过滤后，我们可以通过 getResolvedState().sortedData 属性来获取过滤后的数据。

const submitForm = () => {
    const filteredData = table.getResolvedState().sortedData
    const cellValues = filteredData.map(row => row[cell.column.id])
    console.log(cellValues)
}

<ReactTable
  ref={r => table = r}
  data={data}
  columns={columns}
  filterable
/>

在上面的例子中，我们将 React-Table 的引用保存在 table 变量中，当用户点击表单的提交按钮时，获取到过滤后的数据，并输出特定列的单元格值。

总结

以上三个场景分别介绍了在 React-Table 中如何获取单元格值。在场景一和场景二中，我们通过 rowInfo、column 和 state.selectedRows 等属性来获取单元格值。在场景三中，我们通过 getResolvedState().sortedData属性来获取过滤后的数据。这些方法都帮助我们快速获取所需的单元格值，并进行后续的操作。