javascript - 在 React 表中单击时访问“更多详细信息”

Question

我还在学习 React。我在一个 json 文件中有一组假数据，我用它来填充我用 react-table 制作的表。我有桌子作为一个组件。我在表格的一列中添加了一个“详细信息”按钮，当单击它时，我希望第二个组件出现在表格下方的屏幕上，其中包含我无法合理放入表格的其他详细信息。我假设我需要执行某种使用按钮的 onClick 调用的 handleClick 函数，并使用该 handleClick 来设置一些信息，以便通过 Details 组件访问它。在 table 组件上，我做了一个 forEach 来分配它自己的 ID 号，以便使用它以某种方式调用该特定项目以获取更多详细信息，但我不确定如何使用它。

应用程序.js

import './App.css';
import Details from './components/Details'
import Table from './components/Table';
import React, { Component } from 'react';

class App extends Component {
  state = {

  }

  handleClick(){
    this.setState({
      
    })
  }

  render() {
    return (
      <>
        <Table />
        <Details />
      </>
    )}
}

export default App;

表.js

import React, { useMemo } from "react";
import Data from "../sample.json"
import { useTable, useSortBy, usePagination } from 'react-table'
import { Columns } from './Columns'
import './Table.css'


function Table() {

  const columns = useMemo(() => Columns, [])
  const data = useMemo(() => Data, [])

  const { 
    getTableProps, 
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    pageOptions,
    state,
    prepareRow, 
  } = useTable(
    {columns, data, initialState: {pageSize: 5}},
    useSortBy,
    usePagination)
  
    const { pageIndex } = state

    Data.forEach((item, i) => {
      item.id = i + 1
    })

  return (
    <>
      <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {page.map(row => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <td {...cell.getCellProps()}>
                    {cell.render('Cell')}
                  </td>
                )})}
            </tr>
          )})}
      </tbody>
      </table>
      <div>
        <center>
        <span>
          Page{' '}{pageIndex + 1} of {pageOptions.length}{' '}
        </span>
        <button 
          onClick={() => previousPage()} 
          disabled={!canPreviousPage}>
            Previous
        </button>
        <button 
          onClick={() => nextPage()}
          disabled={!canNextPage}>
            Next
          </button>
          </center>
      </div>
    </>
  )
}

export default Table;

列.js

export const Columns = [
  {
    Header: 'ID',
    accessor: 'id'
  },
  {
    Header: 'Payee Name',
    accessor: 'Payee.Name'
  },
  {
    Header: 'Payee Fax',
    accessor: 'Payee.Fax'
  },
  {
    Header: 'Payee Phone',
    accessor: 'Payee.Phone'
  },
  {
    Header: 'Link',
    accessor: '',
    Cell: props => <button onClick={() => {}}>Details</button>
  },
]

下面的截图或多或少是我想看到的。只是一个表，最后一个项目的扩展详细信息单击了该表。现在，我只是对所有数据进行了一些代码映射，并给他们自己的卡片。但我一次只想要一个，理想情况下。当前的代码映射一切都将在下面。

在此处输入图像描述

import React from 'react';
import Data from '../sample.json'

function Details() {
  return (
    <>
      { Data.map(item => {
        return(
          <div className="item">
            <div className="itemRow1">
              <div>
                <h4>{ item.Payee.Name }</h4>
                <div>{ item.Payee.Phone }</div>
                <div>{ item.Payee.Address.Address1 }</div>
                <div>{ item.Payee.Address.Address2 }</div>
                <div>{ item.Payee.Address.City }</div>
                <div>{ item.Payee.Address.StateOrProvince }</div>
                <div>{ item.Payee.Address.Country }</div>
                <div>{ item.Payee.Address.PostalCode }</div>
                <br/>
                <div>{ item.Payee.Attention} </div>
                <div>{ item.Payee.SubmissionDate }</div>
              </div>
              <div>
                <h4>Payment Information</h4>
                <div>{ item.Payment.PAN }</div>
                <div>{ item.Payment.CVV }</div>
                <div>{ item.Payment.Exp }</div>
              </div>
              <div>
                <h4>Remittance</h4>
                <div>{ item.Remittance.map(payor => {
                  return(
                    <div className="payor">
                      <div>{ payor.PayorName }</div>
                      <div>{ payor.PayorId }</div>
                      <div>{ payor.InvoiceNo }</div>
                      <div>{ payor.Amount }</div>
                      <br/>
                    </div>
                  )})}
                </div>
              </div>
            </div>
            <div>
              {item.Remittance.map(payor => {
                return (
                  <div className="description">
                    {payor.Description}
                  </div>
                )})}
            </div>
          </div> 
        )})}
    </>
  );
}

export default Details;

标签： javascriptreactjsreact-table