0

我正在尝试将 onClick() 事件添加到一行中的单元格，以便在单击单元格时可以获得该行的 keyField 值。此功能最初有效，然后我开始获取列描述信息，而不是行参数中的数据键/值对。这是代码：

import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'components/Delivery/style.scss';
import { Delivery } from 'models/delivery';
import React from 'react';

function DeliveryTable(props: any) {
    const lotSelected = (deliveryId: number) => {
        console.log(`lotSelected: deliveryId: ${deliveryId}`);
        props.updateDeliveryLot(deliveryId);
    };

    const columns = [
        {
            dataField: 'id',
            text: 'ID',
            sort: true,
        },
        {
            dataField: 'completePercent',
            text: '% Complete',
            sort: true,
            events: {
                onClick: (e: any, row: Delivery, rowIndex: any, column: any, columnIndex: any) => {
                    console.log(`row: ${JSON.stringify(row)}`);
                    lotSelected(row.id);
                },
            },
        },
    ];

    const defaultSorted = [
        {
            dataField: 'id',
            order: 'asc',
        },
    ];

    return (
        <div>
            <div id="delivery-result">
                <BootstrapTable
                    bootstrap4
                    keyField="id"
                    data={props.deliveries}
                    columns={columns}
                    defaultSorted={defaultSorted}
                />
            </div>
        </div>
    );
}

正在加载到表中的数据：

[
    {
        "id": 1,
        "completePercent": 95
    },
    {
        "id": 5,
        "completePercent": 96
    },
    {
        "id": 3,
        "completePercent": 61
    }
]

当我单击% Complete列中的一个单元格时，控制台会在行属性中显示以下信息：

row: {"dataField":"completePercent","text":"% Complete","sort":true,"events":{}}

以前，当 onClick() 方法正常工作时， row 属性包含：

row: {"id": 1, "completePercent", 95}

由于我试图检索的键值不再存在于行数据中，因此我得到的值是未定义的，而不是我期望的 id 号。

我还注意到，如果我向列添加样式属性，例如在“% Complete”单元格中的值下划线，则样式信息也将显示在 onClick(row) 调用返回的信息中。例如，如果我将样式信息添加到最后一列（% Complete），它的代码如下所示：

        {
            dataField: 'completePercent',
            text: '% Complete',
            sort: true,
            style: {
                textAlign: 'center', textDecorationLine: 'underline', fontStyle: 'italic',
            },
            events: {
                onClick: (e: any, row: Delivery, rowIndex: any, column: any, columnIndex: any) => {
                    console.log(`row: ${JSON.stringify(row)}`);
                    lotSelected(row.id);
                },
            },
        },

然后控制台输出变为：

row: {"dataField":"completePercent","text":"% Complete","sort":true,"style":{"textAlign":"center","textDecorationLine":"underline","fontStyle":"italic"},"events":{}}

根据文档（https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnevents-object），这应该可以工作。任何帮助将不胜感激。

4

1 回答 1

0

我弄清楚是什么导致了这个问题。onClick() 事件要求参数按照文档指定的顺序排列：

onClick: (e: any, column: any, columnIndex: any, row: Delivery, rowIndex: any) => {

我在解决另一个问题时无意中更改了参数顺序。

于 2022-01-19T20:44:27.877 回答