MDBootstrap中reactjs表中的模态

Question

我是相当新的反应和材料设计自举。我试图使用模拟json文件将一组数据填充到表中。我确实在这方面取得了一定程度的成功。我想在桌子上加入一个模态。这样，当我单击行时，会弹出一个模态。

我将张贴我使用的代码。任何帮助都将不胜感激。

//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"
    }]

我也会发一张照片

表快照

Answer 1

如果我正确理解，您想知道如何添加按钮来打开编辑单元格中的模式窗口。通过将组件添加到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 文档的模态页面示例组件。您可以参考我在斯塔克布利茨上所做的示例。

有关如何自定义数据表以包括不同控件的更多信息，您可以找到这里。