材料表中带有按钮的 Onclick

Question

嗨！您能帮我如何单击按钮 => 当我单击按钮 xet duyet 时，它将更改为其他组件（Checkdetail）。但它
不显示 Checkdetail 的内容。请给我解决方案
这个问题！非常感谢！

我已经添加了一些代码并修改了几个部分，但是无法提交帖子。 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

假设您在应用程序某处正确设置了Router，并且我假设Route 带有path="/checkdetail"，那么您需要推送到相同的路径。

所以，给定一些路线

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

然后你可以将新路由推送到“/checkdetail”

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

您如何将回调附加到按钮是可以的。