使用 Material-table Reactjs 映射数据

Question

我在使用 Reactjs 使用材料表映射数据时遇到了一些问题。当我单击"Xet Duyet"按钮时，它会将数据从Checkdoc传递到Checkdetail。根据我的研究，我使用路由器参数，但我不知道如何使用材料表传递数据

<Route path="/checkdetail/:id" component={Checkdetail} />

检查文档.js

import React from 'react';
import MaterialTable from 'material-table';
import {Button} from '@material-ui/core/';
import { useHistory } from "react-router-dom";
import db from "./db.json";
export default function CheckDoc() {
const [state, setState] = React.useState({
columns: [
{ title: 'Ngày nộp đơn', field: 'date' },
{ title: 'Tên Văn bản', field: 'namedoc' },
{ title: 'Người nộp', field: 'nameapplier'},
],
});
console.log(db);
const history = useHistory();
const routeChange = () => history.push("/checkdetail");
const { useState } = React; 
const [selectedRow, setSelectedRow] = useState(null);
return (
<MaterialTable
// format some options
options={{
search: true,

rowStyle: rowData => ({
backgroundColor: (selectedRow === rowData.tableData.id) ? '#C2D6EE' : '#FFF'
}),
headerStyle: {
backgroundColor: 'default ',
color: '#111'
},    
actionsColumnIndex: -1,    
}}
localization={{        
header: {
actions: 'Trạng Thái',
},  
toolbar:{
searchTooltip: 'Search',
searchPlaceholder: 'Tìm kiếm...',
}
}}
// Button checked
actions={[
{
icon: 'save',
tooltip: 'Save User',
}
]}
components={{
Action: props => (
<Button
color="secondary"
variant="contained"
style={{maxWidth: '75px', maxHeight: '50px' }}
size="small"
onClick={routeChange}
>
Xét duyệt
</Button>
),
}}
title="Xét duyệt"
columns={state.columns}
data={db}
key={db.id}
/>
);
}

数据库.js

[   
{ "id": 1, "date": "20/2/02/2020", "namedoc": "Báo Cáo", "nameapplier": "Trinh Huynh" },
{ "id": 2,"date": "20/2/02/2020", "namedoc": "Báo Cáo 1", "nameapplier": "Hứa Thư" },
{ "id": 3,"date": "20/2/02/2020", "namedoc": "Báo Cáo 2", "nameapplier": "Văn Kiệt" },
{ "id": 4,"date": "20/2/02/2020", "namedoc": "Báo Cáo 3", "nameapplier": "Chiến Thành" },
{ "id": 5,"date": "20/2/02/2020", "namedoc": "Báo Cáo 4", "nameapplier": "Minh Nhựt" },
{ "id": 6,"date": "20/2/02/2020", "namedoc": "Báo Cáo 5", "nameapplier": "Phúc Hậu" }
]

检查详情.js

import React, { useState, useEffect, useRef } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { usePdf } from 'react-pdf-js';
const Checkdetail = () => {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const [page, setPage] = useState(1);
const [pages, setPages] = useState(null);
const renderPagination = (page, pages) => {
if (!pages) {
return null;
}
let previousButton = <Button className="previous" onClick={() => setPage(page - 1)}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></Button>;
if (page === 1) {
previousButton = <Button className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></Button>;
}
let nextButton = <Button className="next" onClick={() => setPage(page + 1)}><a href="#">Next <i className="fa fa-arrow-right"></i></a></Button>;
if (page === pages) {
nextButton = <Button className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></Button>;
}
return (
<nav>
{previousButton}
{nextButton}
</nav>
);
}
const canvasEl = useRef(null);
const [loading, numPages] = usePdf({
file: 'Test.pdf',
page,
canvasEl
});
useEffect(() => {
setPages(numPages);
}, [numPages]);
return (
<div>
<div className="container text-right">
<div className="text-capitalize text-left d-sm-flex justify-content-between align-items-center mb-4" style={{ fontFamily: 'ABeeZee, sans-serif' }}>
<p>Tên văn bản: Báo Cáo Tổng Kết cuối năm</p>
<p>Người nộp: Trinh Huỳnh</p>
</div>
<div class="center" style={{marginBottom: '15px'}} >
<Button variant="outlined" color="primary" style={{ maxWidth: '75px', maxHeight: '45px' }} >Duyệt</Button> {' '}
<Button variant="outlined" color="secondary" style={{ maxWidth: '75px', maxHeight: '45px' }} onClick={handleClickOpen}>Hủy</Button>
</div>

<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Ghi chú</DialogTitle>
<DialogContent>
<DialogContentText>
Ghi chú thông tin cần bổ sung để chỉnh sửa hoàn chỉnh
</DialogContentText>
<TextField
autoFocus
type="email"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Hủy
</Button>
<Button onClick={handleClose} color="primary">
Lưu
</Button>
</DialogActions>
</Dialog>
</div>
<form class="center">
<div>
{loading && <span>Loading...</span>}
<canvas ref={canvasEl} />
{renderPagination(page, pages)}
</div>
</form>
</div>
);
}
export default Checkdetail;

如何从Checkdoc.js获取数据到Checkdetail.js。点击按钮"Xét Duyệt"时显示信息

Answer 1

首先，使用Actionprops 将数据传递给routeChange函数，如下所示：

components={{
Action: props => (
<Button
color="secondary"
variant="contained"
style={{maxWidth: '75px', maxHeight: '50px' }}
size="small"
onClick={() => routeChange(props.data)} // change here
>
Xét duyệt
</Button>
),
}}

现在，routeChange函数应该接收数据，您可以将其传递给CheckDetail：

const routeChange = data => history.push(`/checkdetail/${data.id}`);

最后，在您的CheckDetail中，您应该能够像这样看到此 id：

const Checkdetail = ({ match }) => {
const { id } = match.params
const [open, setOpen] = React.useState(false);
...