react-bootstrap-table-next onclick(row) 未提供正确的键/值信息答案

【问题标题】：react-bootstrap-table-next onclick(row) not providing correct key/value informationreact-bootstrap-table-next onclick(row) 未提供正确的键/值信息
【发布时间】：2022-01-12 16:09:09
【问题描述】：

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

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}

由于我试图检索的键值在 row 数据中不再存在，我得到的值是 undefined 而不是 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)，这应该可以工作。任何帮助将不胜感激。

【问题讨论】：

标签： react-hooks onclick row cell react-bootstrap-table-next

【解决方案1】：

我找出了导致问题的原因。 onClick() 事件要求参数按文档指定的顺序排列：

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

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

【讨论】：