你如何对 react bootstrap 列进行数字排序

Question

我有几列产品 ID (dataField: id)、产品名称 (dataField: name)。我在两列上都启用了排序 (sort:true)。产品 ID 包含产品详细信息页面的 link。当用户单击产品名称 header 时，它会对值进行正确排序。但是，当用户单击产品 ID header 时，它的排序不正确 - 示例值为 7001、20001、7211、7459。它看起来像按字符串而不是数字排序。

我尝试对产品 ID 列使用 sortFunc 和 sortValue。我的代码如下。但是，a.id 和 b.id 都显示为 "underfined"。下面也是我的列定义。

我对反应还很陌生，bootstrap，所以请帮助我理解为什么这些值未定义。

感谢您的帮助。

function numericSort(a, b, order) {
        console.log("order " + order);
        console.log("a.id " + a.id);
        console.log("b.id " + b.id);

        if (order === 'desc') {
            console.log(" Number(b.id) - Number(a.id) " + Number(b.id) - Number(a.id));

            return Number(b.id) - Number(a.id);
        } else {
            console.log(" Number(a.id) - Number(b.id) " + Number(a.id) - Number(b.id));

            return Number(a.id) - Number(b.id);
        }
    }


const [columns, setColumns] = React.useState([
        {       
            dataField: 'id',
            text: 'Product ID',
            sort: true,
            filter: textFilter({placeholder:' '}),          
            headerStyle: {fontSize: '12px', display:'underline', whiteSpace:'nowrap'},
            formatter: linkFormatter,
            sortFunc: numericSort, 
            sortValue: numericSort
          },
          {
            dataField: 'prodName',
            text: 'Product Name',
            sort: true,
            headerStyle: {fontSize: '12px',     textalign: 'center', margin:'1000px', whiteSpace:'nowrap'},
            filter: textFilter({placeholder:' '})
          }
    ]);

Answer 1

不知道为什么 id 字段以字符串形式出现，也许这与它们位于 link 标记中有关。您的下一步是通过控制台记录数字排序函数中的 a 和 b 变量，并查看它们是否未定义。如果它们不是未定义的，请尝试 console.logging Object.keys(a) ，这将列出变量的可用属性，其中应该包含 id 道具。

您还将在其他两个控制台日志中收到错误，即 if else 语句中的错误。您需要将数学语句括在括号中，因为您的 + 只是将结果添加到字符串，而不是以数学方式将字符串和数字相加。 console.log(" Number(b.id) - Number(a.id) " + (Number(b.id) - Number(a.id)));

我不知道您是如何设置此代码的，但我建议使用 react-create-app，因为它将创建一个快速反应应用程序，并允许您查看反应应用程序和组件的基本语法。我从 react-bootstrap-table 中创建了一个 table 来帮助您给出这个答案并正确地进行排序（即使使用字符串长 id），如果这有帮助请告诉我！

Answer 2

这是我最后做的。我打算将 sortFunc 设置为一个函数，但在列定义中定义它也同样有效。

sortFunc: (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}, 
sortValue:  (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}

你如何对 react bootstrap 列进行数字排序

How do you numerically sort react bootstrap column

reactjs

react-bootstrap-table