从React表中获取单元格值

问题描述

我有一个像这样的反应表。我希望能够单击每个单独的单元格并获取值。我知道您可以得到整行，但是我只希望单击每个单元格，这样我就可以将其保存为这样的状态

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

我尝试了此链接How to get cell value on React-Table?

但没有提供太多解释。

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

这是代码

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>
  )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-table reactjs reactjs