0

我开发了一个包含一些数据的反应表，并在每一行中添加了一个“显示”按钮。单击显示按钮应显示所选行的数据。这是一种获取有关数据的更多信息。在主页中，它在表格中显示所有订单。通过单击显示按钮，它应该只显示选定行的数据。这就像在 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
4

0 回答 0