Question

使用react-bootstrap-table2设计该部分。我只想显示带有单击特定单元格选项的弹出框。有什么方法可以组合react-bootstrap-table2和react bootstrap弹出窗口。

Answer 1

您将需要导入所有必需的组件，然后只需按照适合您的方式将它们组合即可。您无需使用文档建议的Button。我这里有一个可行的例子。 https://codesandbox.io/s/confident-bush-8dxgo很难看，我只是把它放在一起，但是它将为您提供如何组合它们的好主意。下次尝试发布一些您尝试过的代码。

Answer 2

可以在引导表道具中使用 formatter 。参考链接： https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html

这是我的密码

List.tsx
    const columns: ColumnProps<User>[] = [    {
                dataField: 'action',
                text: '',
                formatter: ColumnFormatterFactory,
                style: { overflow: 'inherit' },
            },
    ];
        <BootstrapTable
                        bootstrap4
                        bordered={false}
                        classes="mb-5 table-fit"
                        columns={columns}
                        data={this.records}
                        filter={filterFactory()}
                        keyField="id"
                        noDataIndication="No Users yet."
                        remote={{ sort: true, filter: true }}
                        rowClasses="clickable-row"
                        onTableChange={handleTableChange}
                    />


ColumnFormatterFactory.tsx

export const ColumnFormatterFactory = (cell: any, row: number, rowIndex: any, formatExtraData:any) => {
    return (
            <Dropdown>
                <Dropdown.Toggle
                    id={`${row.id}-dropdown`}
                >
                <span >More</span>
                </Dropdown.Toggle>
        <Dropdown.Menu>        
            <Dropdown.Item >one1</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item >two</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item >three</Dropdown.Item>
        </Dropdown.Menu>       
            </Dropdown>    
    );
};

单击react-bootstrap-table 2中的单元格时，显示react Bootstrap Popover

2 个答案: