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

Question

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

第 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';

声明示例table

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

为单独的页面创建两个方法并尝试从 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>   
  ); 
}

我收集了行数据（工作正常）但无法将数据传递给方法（第 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}

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

React Js: How to pass table row data as props to another page using onClick event

onclick

jsx

reactjs