矩形 |使按钮导航到另一个页面并显示详细信息

问题描述

我开发了一个包含一些数据的反应表，并在每一行中添加了一个“显示”按钮。单击显示按钮应显示所选行的数据。这是一种获取有关数据的更多信息。在主页中，它显示了表格中的所有订单。通过单击显示按钮，它应该只显示选定行的数据。这就像在 gmail 中一样。当我们点击每封新电子邮件时，它会导航到一个仅包含所选电子邮件数据的新页面。 有经验的人可以帮我吗？

import React,{ Component } from 'react';
import { Link } from "react-router-dom";
import './district.css';

import axios from 'axios'
import ReactTable from "react-table"; 
import 'react-table/react-table.css'
class Pharmacy extends Component{

  handleShow(){
   //What should go here?
         }

    constructor(props){
        super(props)
        let now=new Date()
        this.state = {
          orders: [],loading:true,date:now
}
   }
   async getOrdersData(){
        const res = await axios.get('https://localhost:44357/api/Orders/PharmacyId/1')
                console.log(res.data)
        this.setState({loading:false,orders: res.data})
      }
      componentDidMount(){
        this.getOrdersData()
      }
      

    render(){
        
        const columns = [ {  
            Header: 'Date',accessor: 'dateTime',},{  
            Header: 'Cutomer Name',accessor: 'customerName',{
            Header: 'orderID',accessor: 'orderID',{ Header: 'PatientAge',accessor: 'patientAge',{  
          Header: 'Cutomer ID',accessor: 'customerId',{  
          Header: 'Telephone',accessor: 'teleNo',{
            Header: '',Cell: ({row})=> (
                <div>
                  <button onClick={this.handleShow}>Show Order</button> 
                   
                </div>
            )
         },]

        return(

            <div className="container outer">
            
                <div className="container district inner">
                <div className="row">
                        <div className="container pharmacy">
                            <h1>Hello!</h1>
                            <p1>View your new orders</p1>
                        </div>  

                        <div className="container table">  
                        <ReactTable  
                            data={this.state.orders}  
                            columns={columns}  
                        />
                        </div>           
                 </div>
                   
                </div>

            </div>

            
        );
    }
}

export default Pharmacy

解决方法

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

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

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