Onclick 带材料表中的按钮

Question

Hi! Could you help me how to click Button => it will change to other component (Checkdetail) When i click button xet duyet. But it
not display the content of Checkdetail. Please give me solution for
this problem! Thank you so much!

I have added some code and modified several parts of it, but the post cannot be submitted. Checkdetail

//CheckDoc.js

import React from 'react';
import MaterialTable , { MTableAction } from 'material-table';
import {Button} from '@material-ui/core/';
import { useHistory } from "react-router-dom";
import Checkdetail from './Checkdetail.js';

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" }
    ],
    data: [
      { date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Trinh Huynh" },
      { date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Hua Thu" },
      { date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Nhat Huynh" },
      { date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Thanh Tran" },
      { date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Van Kiet" },
      { date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Phuc Hau" }
    ]
  });

  const history = useHistory();
  const routeChange = () => {
    let path = "Checkdetail";
    history.push(path);
  };

  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={state.data}
    />
  );
}

//Checkdetail.js

export default function Checkdetail() {
  return (
    <div className="row">
      <div className="col col-lg-7">
        <form>
          <img
            id="img_resize"
            src="assets/img/bao-cao-tong-ket-cong-tac-nam-1.png"
          />
          <button className="btn btn-primary" id="btn_checked" type="button">
            Duyệt
          </button>
          <button className="btn btn-primary" id="btn_cancel" type="button">
            Huy
          </button>
        </form>
      </div>
      <div
        className="col col-lg-5"
        src="assets/img/bao-cao-tong-ket-cong-tac-nam-1.png"
      >
        <form>
          <div className="form-group">
            <label>
              Tên văn bản:&nbsp;
              <input
                className="form-control"
                type="text"
                id="input_note"
                placeholder="Báo cáo tổng kết cuối năm"
              />
            </label>
          </div>
          <div className="form-group">
            <label>
              Ngày nộp: &nbsp;
              <input
                className="form-control"
                type="text"
                id="input_note"
                placeholder="23/05/2020"
              />
            </label>
          </div>
          <div className="form-group">
            <label>Ghi chú&nbsp;</label>
            <textarea className="form-control" defaultValue={""} />
          </div>
          <button className="btn btn-primary" id="btn_checked" type="button">
            Luu
          </button>
        </form>
      </div>
    </div>
  );
}

Answer 1

Assuming you have a Router correctly setup in your app somewhere, and a Route with, I'll assume, a path="/checkdetail" , then you need to push to that same path.

So, given some route

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

Then you can push a new route to "/checkdetail"

const routeChange = () => history.push("/checkdetail");

How you attached the callback to the button is ok.