React-Bootstrap 切换按钮无法隐藏单选按钮圆圈

Question

在我的表单中，我想要切换按钮。以下代码是从关于切换按钮的 react-bootstrap 文档中复制的。但是，单选按钮圆圈在应该隐藏时显示。如何隐藏它们？

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import ToggleButton from 'react-bootstrap/ToggleButton

'

<ButtonGroup>
   {radios.map((radio, idx) => (
    <ToggleButton
     key={idx}
     id={`radio-${idx}`}
     type="radio"
     variant={idx % 2 ? 'outline-success' : 'outline-danger'}
     name="radio"
     value={radio.value}
     checked={radioValue === radio.value}
     onChange={(e) => setRadioValue(e.currentTarget.value)}
                                    >
     {radio.name}
    </ToggleButton>
      ))}
 </ButtonGroup>

Answer 1

使用<ToggleButtonGroup />组件作为容器。将 type 设置为 radio。请注意，当类型为 radio

时，需要 name

查看下面的代码

<ToggleButtonGroup type="radio" name="radio">
  {radios.map((radio, idx) => (
    <ToggleButton
      key={idx}
      id={`radio-${idx}`}
      variant={idx % 2 ? 'outline-success' : 'outline-danger'}
      value={radio.value}
      checked={radioValue === radio.value}
      onChange={(e) => setRadioValue(e.currentTarget.value)}
    >
      {radio.name}
    </ToggleButton>
  ))}
</ToggleButtonGroup>

Answer 2

已接受的答案对我不起作用，但将其添加到我的 CSS 中就成功了：

[type='radio'] {
  display: none; 
}

h/t 到 this answerer

React-Bootstrap 切换按钮无法隐藏单选按钮圆圈

React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle

radio-button

togglebutton

react-bootstrap