在 react-bootstrap-table2 上切換列

Question

使用這個庫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
  };

Answer 1

ToggleList使用渲染道具設計模式，因此它將原始onColumnToggle與您在組件ToggleList上傳播的props一起發送，但您還提供了自己的onColumnToggle函數副本，該副本將覆蓋預期結果。

一個簡單的解決方案，因此您可以通過執行以下操作來利用這兩個功能（組件的實際onColumnToggle及其副本）：

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

這將允許您在列切換時執行自定義操作，並且您仍然擁有ToggleList API 的原始功能。

編輯：此解決方案的問題，即ToggleList組件似乎不受控制。 所以我建議使用官方文檔中的這個例子。