如何从 ToggleButtonGroup 中的 ToggleButton 中删除单选图标？

Question

我正在尝试创建一个按钮组，用户可以在其中选择多个选项。 react-bootstrap 2.0.0-rc.0 为此目的提供组合 ToggleButtonGroup + ToggleButton。不幸的是，按钮旁边出现了一个单选图标。我想摆脱它。下面，您可以找到一个最小的示例来重现收音机图标。

import * as React from "react";
import {
  ToggleButton,
  ToggleButtonGroup,
} from "react-bootstrap";

interface OwnState {
  val: boolean;
}

export default class SomeToggleOptions extends React.Component<OwnProps, OwnState> {
  constructor(p: Readonly<OwnProps>) {
    super(p);
    this.state = { val: true }
  }

  setVal = (newVal: number) => {
    this.setState({
      val: newVal == 1
    })
  }

  render() {
    return (
      <div className="p-1 text-right">
        <span className="p-1">Auto Refresh:</span>
        <ToggleButtonGroup
          name="radio"
          size="sm"
          onChange={this.setVal}
          value={this.state.val ? 1 : 0}
        >
          {radios.map((radio, idx) => {
            return (
              <ToggleButton
                key={idx}
                id={`radio-${idx}`}
                variant={
                  this.state.val === radio.value ? "dark" : "outline-dark"
                }
                value={idx}
              >
                {radio.name}
              </ToggleButton>
            );
          })}
        </ToggleButtonGroup>
      </div>
    );
  }
}

注意：我已经找到，这不对我有用。

当我改用普通 ButtonGroup + Button 时，图标似乎消失了。但这主要不是一个选项，因为您在那里没有类似收音机的“独家”行为。

Answer 1

我恢复到早期的 react-bootstrap 版本 1.6.4。这可能是不可修复的（没有任何骇人听闻的动作，css-覆盖，或类似的）并且由 react-bootstrap 2.0.0 引起，到目前为止它只是一个发布候选。

在早期的 react-bootstrap 版本中，我的代码片段运行完美。

如何从 ToggleButtonGroup 中的 ToggleButton 中删除单选图标？

How can I remove the radio icon from a ToggleButton in a ToggleButtonGroup?

radio-button

togglebutton

react-bootstrap