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

Question

我正尝试在react-bootstrap-table中点击'Click here to view‘按钮加载一个模式

​

​

有人能帮我吗？如何加载单元格的模式onClick

Answer 1

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

下面的示例对模式使用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已弃用。