反应引导表下一个转换列从按钮列表中切换以选择下拉列表？

Question

如何转换按钮列表中的列切换以选择下拉菜单？是否有可能做到这一点？ 我正在使用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} />

Answer 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>
);