React Js：如何使用 onClick 事件将表格行数据作为道具传递到另一个页面

Question

我有一个表格，表格的每一行都有一些行和两个按钮（这是一个 JSX 页面）。我想通过单击按钮将表格行数据作为道具传递到另一个页面并显示数据。 但是我不知道如何通过在按钮单击时传递表格行数据来打开页面。

我感到困惑的第 2 点和第 3 点。

谁能指引我正确的方向？

以下是简化代码：

import React, { useEffect, useState } from 'react'; 
import { Icon, Segment, Table, Dropdown } from 'semantic-ui-react';
import { SalesInvoice } from './invoices';
import { PDF } from './pdfs';

1. 声明示例表

const PurchasesListTable = () => {   
 const [loading, setLoading] = useState(false);


const tableData = [
  {
    ServiceNo:'SER_001',
    ServiceName: "Laptop Repair",
    Cost: 100,
    Location: 'Kolkata',
    id: 1
  },
  {
    ServiceNo:'SER_002',
    ServiceName: "Mobile Repair",
    Cost: 50,
    Location: 'Mumbai',
    id: 2
  },
  {
    ServiceNo:'SER_003',
   ServiceName: "TV Repair",
    Cost: 70,
    Location: 'Delhi',
    id: 5
  },
  {
    ServiceNo:'SER_004',
    ServiceName: "PC Repair",
    Cost: 120,
    Location: 'Chennai',
    id: 4
  }]   

1. 为单独的页面创建两个方法并尝试从 onclick 事件中获取数据（第 3 点）

const handleSalesView = (data) => {
  let payload;
  payload = data
  return <SalesInvoice data={data} />
}

const handlePDFView = (data) => {
  let payload;
  payload = data
  return <PDFData data={data} />
}
  return (  
  <Segment>
    <Segment attached>
      <Table compact celled definition unstackable>
        <Table.Header>
          <Table.Row>
              <Table.HeaderCell>id</Table.HeaderCell>
              <Table.HeaderCell>Service No</Table.HeaderCell>
              <Table.HeaderCell>Service Name</Table.HeaderCell>
              <Table.HeaderCell>Cost</Table.HeaderCell>
              <Table.HeaderCell>Location</Table.HeaderCell>
              <Table.HeaderCell>Actions</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {
            loading ?
            <Table.Row>
              <Table.Cell colSpan='6'>
                <center style={{padding: '140px'}}><Icon name="spinner" color="grey" loading size="huge"/></center>
              </Table.Cell>
            </Table.Row>
            :
           tableData && tableData!==undefined?
            tableData?.map((row, idx) => (
              <PurchaseRow key={idx} row={row} id={idx} onSelect = {setSelectedRow}/>
            ))
            :
            <Table.Row>
              <Table.Cell colSpan='6'>
                <center style={{padding: '40px', color: 'grey'}}><h1>No data</h1></center>
              </Table.Cell>
            </Table.Row>
          }
        </Table.Body>
      </Table>
    </Segment>    
  </Segment>   
  ); 
}

1. 我收集了行数据（工作正常），但无法将数据传递给方法（第 2 点）

  const PurchaseRow = ({id, row, onSelect}) => {   
  const [isOpen, setIsOpen] = useState(false);   
  return(
  <>
    <Table.Row key={id}>
      <Table.Cell>{row.id}</Table.Cell>
      <Table.Cell>{row.ServiceNo}</Table.Cell>
      <Table.Cell>{row.ServiceName}</Table.Cell>
      <Table.Cell>{row.Cost}</Table.Cell>
      <Table.Cell>{row.Location}</Table.Cell>
      <Table.Cell>
      <Dropdown icon='ellipsis vertical' floating direction="left" className='icon'>
          <Dropdown.Menu>
            <Dropdown.Item onClick={()=> { onSelect(row) }} style={{color: '#145ba7'}}>View Sales</Dropdown.Item>
            <Dropdown.Item onClick={()=> { onSelect(row) }}  style={{color: '#E36005'}}>PDF</Dropdown.Item>
          </Dropdown.Menu>
      </Dropdown>
      </Table.Cell>
   </Table.Row>
  </>   
  )}
export {PurchasesListTable}

Answer 1

在这里你可以试试这个，我意识到你在函数中返回组件所以更新了我的答案。 你还需要实现 onCancel 事件，所以当你关闭页面时，setIsSalesView 到 false 或 setIsPDFView 到 false 和 setSelectedRow 到 null

在第 2 点

const [selectedRow, setSelectedRow] = useState(null);
const [isSalesView, setIsSalesView] = useState(false);
const [isPDFView, setIsPDFView] = useState(false);

  return (  
  <Segment>
    {isSalesView && selectedRow && <SalesInvoice data={selectedRow} /> }
    {isPDFView && selectedRow && <PDFData data={selectedRow} /> }
    <Segment attached>
      <Table compact celled definition unstackable>
        <Table.Header>
          <Table.Row>
              <Table.HeaderCell>id</Table.HeaderCell>
              <Table.HeaderCell>Service No</Table.HeaderCell>
              <Table.HeaderCell>Service Name</Table.HeaderCell>
              <Table.HeaderCell>Cost</Table.HeaderCell>
              <Table.HeaderCell>Location</Table.HeaderCell>
              <Table.HeaderCell>Actions</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {
            loading ?
            <Table.Row>
              <Table.Cell colSpan='6'>
                <center style={{padding: '140px'}}><Icon name="spinner" color="grey" loading size="huge"/></center>
              </Table.Cell>
            </Table.Row>
            :
          tableData && tableData!==undefined?
            tableData?.map((row, idx) => (
              <PurchaseRow key={idx} row={row} id={idx} onSelect={setSelectedRow} handleSalesView={setIsSalesView} handlePDFView={setIsPDFView} />
            ))
            :
            <Table.Row>
              <Table.Cell colSpan='6'>
                <center style={{padding: '40px', color: 'grey'}}><h1>No data</h1></center>
              </Table.Cell>
            </Table.Row>
          }
        </Table.Body>
      </Table>
    </Segment>    
  </Segment>   
  ); 
}

在第 3 点

const PurchaseRow = ({id, row, onSelect, handleSalesView, handlePDFView}) => {   
  const [isOpen, setIsOpen] = useState(false);   
  return(
  <>
    <Table.Row key={id}>
      <Table.Cell>{row.id}</Table.Cell>
      <Table.Cell>{row.ServiceNo}</Table.Cell>
      <Table.Cell>{row.ServiceName}</Table.Cell>
      <Table.Cell>{row.Cost}</Table.Cell>
      <Table.Cell>{row.Location}</Table.Cell>
      <Table.Cell>
      <Dropdown icon='ellipsis vertical' floating direction="left" className='icon'>
          <Dropdown.Menu>
            <Dropdown.Item onClick={()=> { onSelect(row); handleSalesView(true);}} style={{color: '#145ba7'}}>View Sales</Dropdown.Item>
            <Dropdown.Item onClick={()=> { onSelect(row); handlePDFView(true);}}  style={{color: '#E36005'}}>PDF</Dropdown.Item>
          </Dropdown.Menu>
      </Dropdown>
      </Table.Cell>
   </Table.Row>
  </>   
  )}
export {PurchasesListTable}