Reactjs 从React表中获取单元格值

我有一个像这样的反应表。 我希望能够单击每个单元格并获取值。我知道你可以得到整行，但我只需要单击每个单元格，这样我就可以像这样保存它

{
    "Team": GB,
    "MoneyLine": -120
}
{
    "Team": GB,
    "Spread": 1
}
{
    "Team": GB,
    "MoneyLine": -120,
    "Spread": -1,
    "Total": 48
}

我试过这个链接

但它并没有提供太多的解释

每当单击行中的任何单元格，然后单击特定值时，我都需要获取团队名称

这是密码

import React, { useState } from 'react'
import styled from 'styled-components'
import { useTable } from 'react-table'
import data from '../Data/data.json'

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`

function Table({ columns, data }) {

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    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>
    </table>
  )
}

export default function PicksTable(){
    const [team, setTeam] = useState('');
    const [moneyLine, setMoneyLine] = useState('');
    const [spread, setSpread] = useState('');
    const [total, setTotal] = useState('');

    const columns = React.useMemo(
        () => [
        {
            Header: 'Teams',
            columns: [
            {
                Header: 'Team',
                accessor: 'team',
            },
            ],
        },
        {
            Header: 'Betting Info',
            columns: [
            {
                Header: 'Money Line',
                accessor: 'moneyLine',
            },
            {
                Header: 'Spread',
                accessor: 'spread',
            },
            {
                Header: 'Total',
                accessor: 'total',
            },
            ],
        },
    ],
    []
  )

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  )
}

import React，{useState}来自“React”
从“样式化组件”导入样式化
从“反应表”导入{useTable}
从“../data/data.json”导入数据
const Styles=styled.div`
填充：1rem；
桌子{
边界间距：0；
边框：1px纯黑；
tr{
：最后一个孩子{
运输署{
边界底部：0；
}
}
}
th，
运输署{
保证金：0；
填充：0.5雷姆；
边框底部：1px纯黑；
右边框：1px纯黑；
：最后一个孩子{
右边界：0；
}
}
}
`
函数表（{columns，data}）{
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
准备工作，
}=可用({
柱，
数据，
})
返回(
{headerGroups.map（headerGroups=>(
{headerGroup.headers.map（列=>(
{column.render（'Header'）}
))}
))}
{rows.map（（row，)）=>{
准备工作（世界其他地区）
返回(
{row.cells.map（cell=>{
返回{cell.render（'cell'）}
})}
)
})}
)
}
导出默认函数PicksTable（）{
const[team，settam]=useState（“”）；
const[moneyLine，setMoneyLine]=useState（“”）；
const[spread，setSpread]=使用状态（“”）；
const[total，setTotal]=useState（“”）；
const columns=React.usemo(
() => [
{
标题：“团队”，
栏目：[
{
标题：“团队”，
访问者：“团队”，
},
],
},
{
标题：“博彩信息”，
栏目：[
{
标题：“货币线”，
访问器：“moneyLine”，
},
{
标题：“排列”，
访问器：'spread'，
},
{
标题：“总计”，
存取器：'总计'，
},
],
},
],
[]
)
返回(
)
}

您需要将onClick添加到

（值位于行和单元格中）：

console.info（row.values.team，cell.value）}
{…cell.getCellProps（）}
>

下面是一个完整的工作代码沙盒：

  <td
    onClick={() => console.info(row.values.team, cell.value)}
    {...cell.getCellProps()}
  >