react bootstrap表next onclick(行)未提供正确的键/值信息

Question

我正试图将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: {"id": 1, "completePercent", 95}

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

我还注意到，如果我在列中添加了一个样式属性，例如在"%Complete"单元格中给值加下划线，那么样式信息也会显示在onClick(行(调用返回的信息中。例如，如果我将样式信息添加到最后一列(%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-对象(这应该起作用。如有任何帮助，我们将不胜感激。

Answer 1

我发现了问题的原因。onClick((事件要求参数按照文档指定的顺序：

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

在对另一个问题进行故障排除时，我无意中更改了参数顺序。