0

如何防止扩展的 React-Table 行在类组件状态更改时折叠。

请在此处找到代码链接https://codesandbox.io/s/agitated-dubinsky-t0hcn?file=/src/nestead-table/index.js

在选择或取消选择复选框（状态更新）时，展开的行正在折叠，请帮助我解决此问题。

我试过下面的代码。它一直打开该嵌套行，但子组件嵌套表内部没有显示（请在第一张图片下方找到）....对我不起作用，因为它是一个嵌套表。跟着一些文件https://react-table.tanstack.com/docs/api/useExpanded不走运！

这是我尝试过的代码。

return (
    <ReactTable
      data={data}
      columns={columns}
      className='-striped -highlight'
      minRows={0}
      defaultPageSize={PAGE_SIZE}
      showPagination={data && data.length > PAGE_SIZE ? true : false}
      expanded={this.state.expanded}
      SubComponent={(row) => {
        // get current active key which needs to be expanded (triggered by clicking on a td element)
        const currentExpandedKey = currentExpandedKeys[row.index];
        let columnData = [];
        console.log('currentExpandedKey------------------', currentExpandedKey, this.state.expanded);
        return (
          <div className='react-nested-table-inner'>
            <h4 className='title'>
              {keyMaps[currentExpandedKey] || currentExpandedKey}
            </h4>
            {this.renderByData(
              row.original[currentExpandedKey],
              keyMaps,
              onCellDisplay
            )}
          </div>
        );
      }}
      // onExpandedChange={(newExpanded, index, event) => {console.log('onExpand', newExpanded, index, event)}}
      getTdProps={(state, rowInfo, column, instance) => {
        return {
          onClick: (e, handleOriginal) => {
            // used to identify which column is expanding
            if (column.expander) {
              const expanded = { ...this.state.expanded };
              expanded[rowInfo.viewIndex] = this.state.expanded[rowInfo.viewIndex] ? false : true;
              console.log('expanded-----', expanded)
              this.setState({ expanded: expanded });
              currentExpandedKeys[rowInfo.index] = column.id;
              console.log('currentExpandedKeys-----', currentExpandedKeys);
            }

            // IMPORTANT! React-Table uses onClick internally to trigger
            // events like expanding SubComponents and pivots.
            // By default a custom 'onClick' handler will override this functionality.
            // If you want to fire the original onClick handler, call the
            // 'handleOriginal' function.
            if (handleOriginal) {
              handleOriginal();
            }
          }
        };
      }}
    />
  );

使用上面的代码，我得到低于输出。

在此处输入图像描述

寻找以下输出。在此处输入图像描述

在此处输入图像描述

提前致谢。

4

0 回答 0