Question

我已经为多个列实现了VirtualizedTable。我发现，渲染后无法对其他列进行排序。

以下是我在课堂上的排序功能

    sort = ({ event, sortBy, sortDirection }) => {
    const nosort = ['input', 'textarea', 'select', 'option', 'span'].indexOf(event.target.tagName.toLowerCase()) !== -1
    if (!nosort && this.props.disableSort !== true) {
        this.setState((prevState, props) => ({ sortBy, sortDirection: sortBy === prevState.sortBy ? sortDirection : 'ASC' }))
    }
}

根据文档，这是我的sortState

    sortState = () => createTableMultiSort(this.sort, defaultSort);

以下是我作为 props

注入到组件中的内容

const defaultSort = () => {
return {
    defaultSortBy: ['firstColumn', 'secondColumn'],
    defaultSortDirection: {
        firstColumn: 'ASC',
        secondColumn: 'ASC',
    }
}

}

这是我的headerRenderer

    headerRenderer = (tableWidth) => ({ columnData, dataKey, disableSort, label, sortBy, sortDirection }) => {

    const showSortIndicator = this.sortState().sortBy.includes(dataKey);

    return (
        <React.Fragment key={dataKey}>
            <div className="ReactVirtualized__Table__headerTruncatedText" title={label}>
                {label}
            </div>
            {showSortIndicator && <SortIndicator key="SortIndicator" sortDirection={this.sortState().sortDirection[dataKey]} />}
            <Draggable
                axis="x"
                defaultClassName="DragHandle"
                defaultClassNameDragging="DragHandleActive"
                onDrag={(event, { deltaX }) => { this.resizeRow({ dataKey, deltaX, tableWidth }) } }
                position={{ x: 0 }}
                zIndex={999}
            >
                <span className="DragHandleIcon" title="Drag icon to expand/collapse the column">⋮</span>
            </Draggable>
        </React.Fragment>
    )

我已经阅读了代码createMultiSort并调试了自己的代码，以了解为什么它不起作用。基本上，showSortIndicator不是true，因为sortBy不包含列键。

我试图在defaultSort中将列的名称输入为数据类型。但这似乎不起作用。

在渲染后如何对其他列进行排序？如果已指定默认排序方式，这些列将如何排序？

TIA 帕特里克

Answer 1

经过一段时间的调试并查看源代码后，可以解决问题。似乎您不能单独指定defaultSortBy作为元素的道具。您需要在创建元素时指定。因此，根据文档-

const sortState = createMultiSort(sort, {
     defaultSortBy: ['firstName', 'lastName'],
     defaultSortDirection: {
         firstName: 'ASC',
         lastName: 'ASC',
 },
 });

反应虚拟化多列排序，加载后排序

1 个答案: