Переключить столбцы на реакции-бутстрап-таблица2

Question

Использование этой библиотеки https://react -bootstrap-table.github.io / Reaction-bootstrap-table2 /

И это для переключения столбцов: https://react -bootstrap-table.github.io /act-bootstrap-table2 / storybook / index.html? SelectedKind = Bootstrap% 204 & selectedStory = Column% 20Toggle% 20 с% 20bootstrap% 204 & полный = 0 & аддоны = 1 & история = 1 & panelRight = 0 & addonPanel =% 2Factions сборник% 2Factions панели

Документы по переключению столбцов: https://react -bootstrap-table.github.io /act-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 с props вы распространяете на компонент ToggleList, но вы также предоставили свою собственную копию функции onColumnToggle, которая переопределит ожидаемый результат.

простое решение, чтобы вы могли воспользоваться двумя функциями (фактическим onColumnToggle Компонента и его копией), выполнив что-то вроде этого:

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

это позволит вам выполнять пользовательские операции, когда столбец переключается, и у вас все еще есть исходная функциональность ToggleList API.

РЕДАКТИРОВАТЬ: Проблема с этим решением, что компонент ToggleList кажется неуправляемым. поэтому я бы предложил использовать этот пример из официальных документов.