React-virtualized Multiple Column Sort，加载后排序答案

【问题标题】：React-virtualized Multiple Column Sort, sorting after loadingReact-virtualized Multiple Column Sort，加载后排序
【发布时间】：2019-04-09 10:52:02
【问题描述】：

我已经为多排序列实现了 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 不正确，因为 sortBy 不包含列键。

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

如何在渲染后启用对其他列的排序？如果指定了默认排序，这些列将如何排序？

TIA 帕特里克

【问题讨论】：

标签： react-virtualized

【解决方案1】：

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

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

【讨论】：