React table 更改单元格 onClick 的样式

Question

我是 React table 的新手，我使用 React-table 创建了基本的 table。单击特定单元格时，我无法弄清楚如何更改单元格的颜色。我在 Whosebug 上找不到任何资源或相关问题。

这是我的代码：

import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import MOCK_DATA from '../MOCK_DATA.json'
import { COLUMN } from './Column'
import './table.css'

export const BasicTable = () => {
  const columns = useMemo(() => COLUMN, [])
  const data = useMemo(() => MOCK_DATA, [])

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

  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
        <tfoot>
          {footerGroups.map(footerGroup => (
            <tr {...footerGroup.getFooterGroupProps()}>
              {footerGroup.headers.map(column => (
                <td {...column.getFooterProps()}>{column.render('Footer')}</td>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
    </>
  )
}

我在 MOCK_DATA 中获取演示数据（这只是随机数据）。当我点击特定的单元格时，我希望特定的单元格颜色发生变化。我应该如何处理这个问题。在反应中，如果我们想改变按钮的颜色或其他任何东西，我们可以使用 useState 来做到这一点，但我在这里无法弄清楚。

这是现场示例：https://codesandbox.io/s/focused-field-2sgkqz?file=/src/MOCK_DATA.json:35842-48670

Answer 1

你想要is:when你点击一个特定的单元格，那个特定的单元格改变颜色？如果是这样，你只需要记住选择的 row.like 是 demo，这是你想要的吗？

React table 更改单元格 onClick 的样式

React table changing style of cell onClick

reactjs

react-table-v7