Reactjs 的 MDBootstrap 中 table 内的模态

Question

我对 reactjs 和 material 设计 bootstrap 还很陌生。我正在尝试使用模拟 json 文件将一组数据填充到 table 中。我确实设法在这方面取得了一定程度的成功。我想在 table 行中加入一个模式。这样当我单击该行时会弹出一个模式弹出窗口。

我会post我用过的代码。任何帮助将不胜感激。

//TablePage.js

import React, { Component } from "react";
import { MDBDataTable } from "mdbreact";
import testdata from "../../data.js";

class TablePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        columns: [
          {
            label: "test ID",
            field: "testID",
            sort: "asc",
            width: 50
          },
          {
            label: "test Entity",
            field: "testEntity",
            sort: "asc",
            width: 50
          },
          {
            label: "test Entity Key",
            field: "testEntityKey",
            sort: "asc",
            width: 50
          },
          {
            label: "test Business Date",
            field: "testBusinessDate",
            sort: "asc",
            width: 100
          },
          {
            label: "test created Date",
            field: "testcreatedDate",
            sort: "asc",
            width: 100
          },
          {
            label: "testScore",
            field: "test Score",
            sort: "asc",
            width: 50
          },
          {
            label: "test Score Normalised",
            field: "testScoreNormalised",
            sort: "asc",
            width: 50
          },
          ,
          {
            label: "testUnitIdentifier",
            field: "test Unit Identifier",
            sort: "asc",
            width: 50
          },
          {
            label: "testOwnerIdentifier",
            field: "testOwner Identifier",
            sort: "asc",
            width: 50
          },
          {
            label: "testState",
            field: "test State",
            sort: "asc",
            width: 50
          },
          {
            label: "edit",
            field: "Edit",
            sort: "asc",
            width: 50
          }
        ],
        rows: testdata
      }
    };

  }

  render() {

    return (
      <MDBDataTable btn striped bordered hover data={this.state.data}>
        test
      </MDBDataTable>
    );
  }
}

export default TablePage;

这是我尝试使用的模拟数据文件。

//data.js
const data = [
    {
        testID: 938932,
        testEntity: "employee",
        testEntityKey: 1527003,
        testBusinessDate: "6/14/2017",
        testcreatedDate: "8/7/2017",
        testScore: 115,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "938932",
        testState: "inprogress"
    },
    {
        testID: 903576,
        testEntity: "employee",
        testEntityKey: 1593873,
        testBusinessDate: "6/5/2017",
        testcreatedDate: "1/17/2018",
        testScore: 175,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "903576",
        testState: "onhold"
    },
    {
        testID: 947830,
        testEntity: "employee",
        testEntityKey: 1735438,
        testBusinessDate: "8/16/2017",
        testcreatedDate: "10/14/2017",
        testScore: 139,
        testScoreNormalised: "100",
        businessUnitIdentifier: "",
        testownerIdentifier: "947830",
        testState: "inprogress"
    },
    {
        testID: 952479,
        testEntity: "employee",
        testEntityKey: 1305158,
        testBusinessDate: "1/14/2018",
        testcreatedDate: "2/3/2018",
        testScore: 160,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "952479",
        testState: "ready"
    },
    {
        testID: 927366,
        testEntity: "employee",
        testEntityKey: 1645384,
        testBusinessDate: "8/20/2017",
        testcreatedDate: "3/18/2018",
        testScore: 123,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "927366",
        testState: "onhold"
    }]

我也要post一张图

Table snapshot

Answer 1

如果我没理解错的话，您想知道如何在编辑单元格中添加一个按钮来打开模式window。这可以通过将组件添加到 data.js:

中的编辑字段来轻松完成

import React from 'react';
import ModalPage from './ModalPage';

export default [
  {
    testID: 938932,
    testEntity: "employee",
    testEntityKey: 1527003,
    testBusinessDate: "6/14/2017",
    testcreatedDate: "8/7/2017",
    testScore: 115,
    testScoreNormalised: "100",
    testUnitIdentifier: "",
    testownerIdentifier: "938932",
    testState: "inprogress",
    edit: <ModalPage />
  },
  {
    testID: 927366,
    testEntity: "employee",
    testEntityKey: 1645384,
    testBusinessDate: "8/20/2017",
    testcreatedDate: "3/18/2018",
    testScore: 123,
    testScoreNormalised: "100",
    testUnitIdentifier: "",
    testownerIdentifier: "927366",
    testState: "onhold",
    edit: <ModalPage />
  }
];

我在这里使用的 ModalPage 组件是来自 mdb docs. You can reference the example I've made on Stackblitz 的模态页面示例组件。

有关如何自定义数据的更多信息 table 以包含您可以找到的不同控件 here。

Reactjs 的 MDBootstrap 中 table 内的模态

Modal within a table in MDBootstrap for reactjs

javascript

reactjs

bootstrap-4

bootstrap-material-design

mdbreact