反应引导表下一个从按钮列表转换列切换到选择下拉列表？答案

【问题标题】：React bootstrap table next convert column toggle from button list to select dropdown?反应引导表下一个从按钮列表转换列切换到选择下拉列表？
【发布时间】：2020-09-17 10:40:47
【问题描述】：

如何将按钮列表中的列切换转换为选择下拉列表？是否有可能做到这一点？我正在使用 react-bootstrap-table-next。

const CustomToggleList = ({ columns, onColumnToggle, toggles }) => (
  <div
    className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
    {columns
      .map((column) => ({
        ...column,
        toggle: toggles[column.dataField],
      }))
      .map((column) => (
        <div>
          <button
            type="button"
            key={column.dataField}
            className={`btn btn-warning ${column.toggle ? "active" : ""}`}
            data-toggle="button"
            aria-pressed={column.toggle ? "true" : "false"}
            onClick={() => onColumnToggle(column.dataField)}
          >
            {column.text}
          </button>
        </div>
      ))}
  </div>
);


<CustomToggleList {...props.columnToggleProps} />

【问题讨论】：

标签： reactjs react-table

【解决方案1】：

 const CustomToggleList = ({ columns,onColumnToggle, toggles }) => (
    <div className="text-center">
        <div class="pull-left ">
            <div class="btn-group pull-left ">
                <button class=" btn-default dropdown-toggle custom-csv" data-toggle="dropdown">Columns</button>
                
                <ul class="dropdown-menu customcolumn-scroll" >
                    {
                        columns.map(column => ({
                            ...column,
                            toggle: toggles[column.dataField]
                    }))
                    .map((column, index) => (
                        <React.Fragment >
                            <label>
                                <input type="checkbox" key={column.dataField} 
                                    id={column.dataField} 
                                    checked={column.toggle} 
                                    aria-checked={column.toggle ? "true" : "false"}
                                    onChange={() => onColumnToggle(column.dataField)} />
                                &nbsp;
                                {column.text}
                            </label>
                        </React.Fragment>
                    ))}
                </ul>
            </div>
        </div>
    </div>
);

【讨论】：