时间戳

首页 > 解决方案 > 在 react-bootstrap-table2 上切换列

reactjs - 在 react-bootstrap-table2 上切换列

问题描述

使用这个库https://react-bootstrap-table.github.io/react-bootstrap-table2/

这可以切换列：https ://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Bootstrap%204&selectedStory=Column%20Toggle%20with%20bootstrap%204&full=0&addons= 1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

关于列切换的文档：https ://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-column-toggle.html

我需要知道隐藏了哪些列。

为此包括一个回调：

onColumnToggle: Call this method when user toggle a column.

实施的：

<ToolkitProvider
          keyField="globalId"
          data={ this.props.data }
          columns={ this.state.columns }
          columnToggle
        >
          {
            props => {
              return (
                <>
                  <ToggleList {...props.columnToggleProps} onColumnToggle={this.columnToggle} className="d-flex flex-wrap"/>
                  <hr/>
                  <BootstrapTable
                    striped
                    bootstrap4
                    keyfield="globalId"
                    {...props.baseProps}
                  />
                </>
              )

            }
          }
        </ToolkitProvider>

我的函数this.columnToggle按预期触发。但表格本身不再隐藏/显示列。如果我删除我的功能，它会再次起作用。

更新： columnToggle 函数：

 columnToggle = (column) => {
    console.log(column); // outputs the toggled column
  };

标签： reactjsreact-bootstrap-table

解决方案

使用ToggleListrender props 设计模式，因此它会发送原始文件onColumnToggle 和props您在组件上传播的内容ToggleList，而且您提供了自己的onColumnToggle函数副本，这将覆盖预期结果。

一个简单的解决方案，因此您可以通过执行以下操作来利用这两个功能（onColumnToggle组件的实际功能和您的副本）：

<ToggleList {...props.columnToggleProps} onColumnToggle={() => {this.columnToggle(); props.columnToggleProps.onColumnToggle(/* whatever params it needs */)}} className="d-flex flex-wrap"/>

这将允许您在列切换时执行自定义操作，并且您仍然拥有ToggleListAPI 的原始功能。

编辑：这个解决方案的问题是，该ToggleList组件似乎不受控制。所以我建议使用官方文档中的这个例子。

推荐阅读