Question

过去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>中（无论是哪种方式），但这没有帮助。

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

如何实现React Bootstrap单选按钮

1 个答案: