如何实现 React Bootstrap 单选按钮答案

【问题标题】：How to implement React Bootstrap Radio Buttons如何实现 React Bootstrap 单选按钮
【发布时间】：2020-11-19 00:16:03
【问题描述】：

在过去的 2 个小时里，我一直在研究文档，但我不知道如何使用引导程序实现单选按钮（我根本没有用 react 完成它，但仍然如此）。

我找到的有关单选按钮的唯一文档是：https://react-bootstrap.github.io/components/input-group/ 在“复选框和单选”下我什至不知道如何为单选按钮提供文本！

这是我尝试过的：

    <InputGroup>
      <InputGroup.Radio
        value="hi"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>

      <InputGroup.Radio
        value="hi1"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>

      <InputGroup.Radio
        value="hi2"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>

      <InputGroup.Radio
        value="h3"
        aria-label="Radio button for following text input"
      ></InputGroup.Radio>
    </InputGroup>

它们甚至不像单选按钮，我可以点击所有它们，它们都会被选中。

我也尝试将它们包装在 <InputGroup.Prepend>（不管是什么）中，但没有帮助。

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

因此，目前它们表现为独立的单选按钮（未形成组）。您需要提供一个 name 属性，该属性对于组中的所有单选按钮都是相同的，它们被绑定在一起。

类似这样的：

<InputGroup>
  <InputGroup.Radio value="1" name="test" aria-label="Radio 1" />some text
  <InputGroup.Radio value="2" name="test" aria-label="Radio 2" />or this text
  <InputGroup.Radio value="3" name="test" aria-label="Radio 3" />no, that text
</InputGroup>

【讨论】：