Отображение данных с таблицей материалов Reactjs - PullRequest
Новая
       71

Отображение данных с таблицей материалов Reactjs

1 голос
/ 20 июня 2020

У меня проблема с отображением данных с таблицей материалов с Reactjs. Когда я нажимаю кнопку «Xet Duyet», он передает данные из Checkdo c в Checkdetail. После моих исследований я использую параметры маршрутизатора, но я не знаю, как передавать данные с помощью таблицы материалов 

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

Checkdo c. 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;

Как получить данные из Checkdo c. js на Checkdetail. js. Отображать информацию, когда я нажимаю кнопку «Xét Duyệt»

1 Ответ

0 голосов
/ 20 июня 2020

Сначала используйте свойства 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}`);

И, наконец, в вашем CheckDetail вы должны увидеть этот идентификатор следующим образом: 

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

  ...
...