javascript - React 表 - 如何合并特定列和单元格值的表

Question

这是我创建的 2 个表。

这是它的数据

  const callData = [
    { id: 1, type: "call", volume: 50000, strike: 3000 },
    { id: 2, type: "call", volume: 30000, strike: 5000 },
    { id: 3, type: "call", volume: 20000, strike: 7000 }
  ];

  const putData = [
    { id: 1, type: "put", volume: 50000, strike: 3000 },
    { id: 2, type: "put", volume: 10000, strike: 5000 },
    { id: 3, type: "put", volume: 7000, strike: 7000 }
  ];

如果你点击该行，它会打印类似的东西

  const rowOnClick = (row) => {
    let obj = row.values;
    console.log(`clicked ${obj.type} for Strike ${obj.strike}`);
  };

// log "clicked call for Strike 3000"

现在我想将这两个表合并在一起。
一张 table 就像

如果我点击红色框中的行，它应该打印clicked call for Strike xxx。
如果我单击绿色框中的行，它应该打印 clicked put for Strike xxx。

例如，如果我点击 strike 5000 红色框中的行，它会打印 clicked call for Strike 5000

我该怎么做？

Codesandbox
https://codesandbox.io/s/vigilant-easley-v6h8p?file=/src/App.js:0-2789
应用程序.js

import React, { useEffect } from "react";
import styled from "styled-components";
import { useTable } from "react-table";

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 }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  const rowOnClick = (row) => {
    let obj = row.values;
    console.log(`clicked ${obj.type} for Strike ${obj.strike}`);
  };

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()} onClick={() => {}}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr
              {...row.getRowProps()}
              onClick={() => {
                rowOnClick(row);
              }}
            >
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: "Info",
        columns: [
          {
            Header: "Type",
            accessor: "type"
          },
          {
            Header: "Volume",
            accessor: "volume"
          },
          {
            Header: "Strike",
            accessor: "strike"
          }
        ]
      }
    ],
    []
  );

  // got below data from async request
  const callData = [
    { id: 1, type: "call", volume: 50000, strike: 3000 },
    { id: 2, type: "call", volume: 30000, strike: 5000 },
    { id: 3, type: "call", volume: 20000, strike: 7000 }
  ];

  const putData = [
    { id: 1, type: "put", volume: 50000, strike: 3000 },
    { id: 2, type: "put", volume: 10000, strike: 5000 },
    { id: 3, type: "put", volume: 7000, strike: 7000 }
  ];

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

export default App;

Answer 1

您可以将您的数据合并到一个对象中并仅呈现一个表格。还可以在 tr 元素上使用 onClick，您可以通过在 td 元素上使用 onClick 来处理您的要求并决定在 td 的 onClick 回调中将哪些数据发送到 rowOnClick 方法。像这样:

 {rows.map((row, i) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map((cell) => {
            ...
            return <td  {...cell.getCellProps()} 
            onClick={ column === 'strike' ? undefined : ()=> rowOnClick({...})}>
              {cell.render("Cell")}</td>;
          })}
        </tr>
      );
    })}

我实现了一个例子 here on codesandbox你可以检查一下。