javascript - 更改光标以等待表排序

Question

我正在使用 React Bootstrap Table，并且在用户单击排序按钮时尝试添加加载光标。

当我使用那个特定的表时，这个问题似乎更普遍，因为当表排序时 DOM 不可用，所以我对光标所做的任何事情都只会在表完成排序后发生。如果表格包含很多项目，这可能需要几秒钟。

有没有办法在排序开始之前添加加载光标？

这是我迄今为止在 React-Bootstrap-Table 方面尝试过的内容：

stopSortLoading = () => {
    if (document.querySelector('.table-container').classList.contains('loading-pointer')) {
        document.querySelector('.table-container').classList.toggle("loading-pointer")
    }
}
startSortLoading = () => {
    if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
        document.querySelector('.table-container').classList.toggle("loading-pointer")
    }
}

render() {

    const options = {
        onSortChange: this.startSortLoading,
        afterTableComplete: this.stopSortLoading
    };

我还尝试将 onClick 添加到父 div 即

<div className='table-container' onClick={() => {
            if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
                document.querySelector('.table-container').classList.toggle("loading-pointer")
            }
        }}>
...table code
</div>

在对表格进行排序之前，我尝试过的任何操作都没有任何效果。

标签： javascriptreactjssortingreact-bootstrap-table