Question

我正在尝试向react bootstrap表中的单元格添加一个按钮，其代码如下：

    import React, { Component } from "react";
    import BootstrapTable from "react-bootstrap-table-next";
    import { Button } from 'reactstrap';

    class ActionsCard extends Component {

    constructor(props) {
        super(props);
        this.state = {
          actions: [{action: "Upgrade device", details: "Upgrade device to version 0.1.1", _id: "1"}],
          valid: true
        };
        this.columns = [
          {
            text: "Action",
            dataField: "action",
            sort: true,
            editable: false,
            headerStyle: (colum, colIndex) => {
              return { width: "5%", textAlign: "left" };
            }
          },
          {
            text: "Details",
            dataField: "details",
            sort: true,
            editable: false,
            headerStyle: (colum, colIndex) => {
              return { width: "12%", textAlign: "left" };
            }
          },
          {
            sort: true,
            headerStyle: (colum, colIndex) => {
              return { width: "16%", textAlign: "left" };
            },
            Header: 'Test',
            Cell: cell => (
               <Button onClick={() => console.log(cell.original)}>Upgrade</Button>
            ),
          }
        ];
      }

      render() {
        return (
          <React.Fragment>
            <BootstrapTable
              keyField="_id"
              data={this.state.actions}
              columns={this.columns}
              noDataIndication="No Interfaces available"
              defaultSorted={[{ dataField: "action", order: "asc" }]}
            />
          </React.Fragment>
        );
  }
}

export default ActionsCard;

但是，当我运行代码时，表的前两列按预期显示，但是第三列只是空的。

Answer 1

您可以像this讨论中提到的那样使用格式化程序添加按钮

    {
        dataField: "databasePkey",
        text: "Remove",
        formatter: (cellContent: string, row: IMyColumnDefinition) => {
            if (row.canRemove)
                return <button className="btn btn-danger btn-xs" onClick={() => this.handleDelete(row.databasePkey)}>Delete</button>
            return null
        },
    },

如何在React Bootstrap表内添加按钮？

1 个答案: