在单元格上的 react-bootstrap-table 上创建可点击按钮

Question

我正在尝试通过单击 react-bootstrap-table 中的“单击此处查看”按钮来加载模式

有人可以帮我吗？如何加载单元格的模态 onClick

Answer 1

为您的按钮创建一个组件，在其单击处理程序中显示一个对话框。 使用 react-bootstrap-table，您可以在 header-column 定义中为单元格传递数据格式化函数，以呈现此按钮。

以下示例使用 react-bootstrap-dialog (https://github.com/akiroom/react-bootstrap-dialog/) 作为模态。

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import Dialog from 'react-bootstrap-dialog';

class YourTable extends Component {

    cellButton(cell, row, enumObject, rowIndex) {
        return (
            <YourButton cell={cell} row={row} rowIndex={rowIndex} />
        )
    }
    render() {
        return (
            <BootstrapTable data={yourdata}>
                <TableHeaderColumn dataField='id' isKey>Id</TableHeaderColumn>
                <TableHeaderColumn
                    dataField='sessionDetails'
                    dataFormat={this.cellButton.bind(this)}></TableHeaderColumn>
            </BootstrapTable>
        )
    }
}

class YourButton extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(cell, row, rowIndex) {
        this.dialog.show({
            body: `Confirm... "${cell}"?`,
            actions: [
                Dialog.CancelAction(),
                Dialog.OKAction(() => {
                // do whatever you want
                })
            ]
        })
   }

   render() {
        const { cell, row, rowIndex } = this.props;
        return (
            <React.Fragment>
                <Button
                    bsStyle="primary"
                    onClick={() => this.handleClick(cell, row, rowIndex)}
                >Show Info</Button>
                <Dialog ref={(el) => { this.dialog = el }} />
            </React.Fragment>
        )
    }
}

请参阅：https://allenfang.github.io/react-bootstrap-table/docs.html#dataFormat 了解更多信息，但请注意 react-bootstrap-table 已弃用。