反应-引导切换按钮无法隐藏单选按钮圈 [英] React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle

问题描述

在我的表单中，我希望切换按钮。以下代码是从切换按钮上的Reaction-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>

推荐答案

使用<ToggleButtonGroup />组件作为容器。将type设置为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>

这篇关于反应-引导切换按钮无法隐藏单选按钮圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！