我在使用Reactjs在材质表中映射数据时遇到了一些问题。当我单击“ Xet Duyet”按钮时，它将把数据从Checkdoc传递到Checkdetail。经过研究，我使用了路由器参数，但是我不知道如何通过Material-table传递数据
<Route path="/checkdetail/:id" component={Checkdetail} />
Checkdoc.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}
/>
);
}
DB.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" }
]
Checkdetail.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étDuyệt”按钮时显示信息
答案 0 :(得分：0)
首先，使用function intersection(values1, values2) {
const obj = values1.reduce((o, [a, ...bcd]) => Object.assign(o, {[a]: bcd}), {});
return values2.map(([a]) => obj[a] ? obj[a] : [""]);
}
道具以这种方式将数据传递到您的Action函数：
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}`);
中，您应该可以看到如下所示的ID：
CheckDetail