Question

我正在尝试在click-bootstrap-table中点击“点击此处查看”按钮加载模态

任何人都可以帮助我吗？如何在单元格

上加载模态

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。

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

1 个答案: