React-Bootstrap中的ButtonGroup作为单选按钮

Question

我正在尝试将一组react-bootstrap按钮制作成单选按钮集。我可以很容易地使用bootstrap和<input type="radio">元素来实现这一点，但是不知道如何在react-bootstrap中实现。以下代码允许用户选择每个按钮，而不仅仅是一个。

JS:

const operationButtons = (    
  <ButtonGroup>
    <Button active>Radio 1</Button>
    <Button>Radio 2</Button>
  </ButtonGroup>
);

React.render(operationButtons, document.getElementById('operationButtonsDiv'));

HTML：

<div name="operationButtonsDiv" id="operationButtonsDiv" data-toggle="buttons"/>

- Joe W

Answer 1

自从被接受的答案以来，该框架已更改，并且现在复制了Bootstrap框架的选项组行为。现在您只需要为组中的每个选项添加一个组名即可：

<Radio name="groupOptions">Option 1</Radio>
<Radio name="groupOptions">Option 2</Radio>
<Radio name="groupOptions">Option 3</Radio>

- Alexandra

---

在这种情况下，您如何处理onChange事件？ - Jeremiah

@Jeremiah，你需要在每个“Radio”组件上设置一个事件处理程序，并有一个状态变量来跟踪选择。 - Alexandra

@tatsu Radio是可以从react-bootstrap包中导入的模块/组件。 - Marko K

@MarkoK 这在2020年还是有效的吗？我找不到如何导入它... - Yossi Vainshtein

@YossiVainshtein 看起来他们已经改变了API，请参见https://react-bootstrap.github.io/components/forms/#forms-form-check - Marko K

Answer 2

因此，我最终嵌套了一个单选框 Input 在按钮中，就像你通常在 Bootstrap 中所做的那样。

render() {
  return (
    <ButtonGroup>
      <Button active>Radio 1
        <Input ref="input1" type="radio" name="radioButtonSet" value='input1' standalone defaultChecked/>
      </Button>
      <Button>Radio 2
        <Input ref="input2" type="radio" name="radioButtonSet" value='input2' standalone/>
      </Button>
    </ButtonGroup>
  )
}

我还重写了默认的 .radio css，以修复其显示方式。

.radio {
  margin-top: 0;
  margin-bottom: 0;
}

React-bootstrap计划最终实现RadioGroup：https://github.com/react-bootstrap/react-bootstrap/issues/342

- Joe W

---

为了清晰起见，似乎您的<Input/>组件是自定义的，在React-Bootstrap页面上找不到任何文档。 - ericgrosse

@ericgrosse Input是一个React-Bootstrap组件，用于所有输入类型。这个问题已经超过一年了，API已经发生了重大变化。现在似乎有一个Radio组件。我不知道这个问题/答案是否仍然与当前的API相关。 - Joe W

我认为React-Bootstrap不是很有用的原因之一。 - vijayst

Answer 3

这个页面上的一些答案不起作用了。可能自那时以来情况有所变化。

我在React Bootstrap网站的帮助下编写了这个。

<Col>
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Radio  name="group1"/>
            <InputGroup.Text >London</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl/>
    </InputGroup> 
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Radio  name="group1"/>
            <InputGroup.Text >New York</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl/>
    </InputGroup> 
    <InputGroup>
        <InputGroup.Prepend>
            <InputGroup.Radio  name="group1"/>
            <InputGroup.Text >Colombo</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl/>
    </InputGroup> 

为了让单选按钮集合组成一个整体，您需要给它们命名（这样任何时候只有一个单选按钮被选中）。

添加表单控件可以使输入框边缘变得漂亮、圆润，但也会使单选按钮标签可编辑。如果这是一个问题，您可以省略表单控件。

如果您想要不同的外观和感觉，可以尝试这个。

<Form.Check
    type="radio"
    label="London"
    name="group2"
    id="radio1"
/> 
<Form.Check
    type="radio"
    label="New York"
    name="group2"
    id="radio2"
/> 
<Form.Check
    type="radio"
    label="Colombo"
    name="group2"
    id="radio3"
/> 

然而，获取值和处理onChange事件对于这些控件来说很困难。最终我使用了另一个控件。

这是一个名为react-radio-group的npm包。您需要在命令行上运行以下命令来安装它。

npm install react-radio-group

然后在您的文件中导入它。

import { Radio, RadioGroup} from 'react-radio-group'

这是按钮组的代码。

<RadioGroup name="fruits" onChange={(e) => handleOnChange(e)}>
   <div className="radio-button-background">
       <Radio value="Apple" className="radio-button" />Apple
   </div>
   <div className="radio-button-background">
       <Radio value="Orange" className="radio-button" />Orange
   </div>
   <div className="radio-button-background">
       <Radio value="Banana" className="radio-button" />Banana
   </div>
</RadioGroup>

类名是我给样式命名的地方。

- Daneesha

Answer 4

我刚遇到了同样的问题，并通过使用组件的状态来解决它:

_onOptionChange(option) {
    this.setState({
        option: option
    });
}

render() {
    render (
        <ButtonGroup>
            <Button onClick={this._onOptionChange.bind(this, 'optionA')} active={this.state.option === 'optionA'}>Option A</Button>
            <Button onClick={this._onOptionChange.bind(this, 'optionB')} active={this.state.option === 'optionB'}>Option B</Button>
        </ButtonGroup>
    );
}

- user276289

---

优秀的解决方案，已经实现。 - eden

Answer 5

对我来说，只使用 标签就可以了。确保它们都有相同的name="radio-group-value-here"。要在渲染时选择一个按钮，请使用checked={bool}。我还使用了disabled={bool}来显示但禁止一些选择。我最终决定使用onClick，这似乎很有效。最后，这全部都在对话框中，需要偏移量以防止单选按钮与左侧边缘重叠。

---

<Row>
    <Col sm={11} smOffset={1} >
        <Radio name="changeset-chooser"
               checked={this.state.checked === 'current'}
               disabled={this.props.changeset.status === "pending"}
               onClick={ (e) => { /* event handler */ } } >
            Current Data
        </Radio>
    </Col>
</Row>
<Row>
    <Col sm={3} smOffset={1} >
        <Radio name="changeset-chooser"
               onClick={ (e) => { /* event handler */ } } >
            History
        </Radio>
    </Col>
    <Col sm={7}  >
          <NotPartOfSample />
    </Col>
</Row>

- Joshua Goldstein

Answer 6

现在是2022年，所以该库已经移动了。

以下是如何创建一个是/否单选按钮：

<Form>
    <Form.Check 
      type="radio"
      name="group1"
      id={`default-radio`}
      label={`Yes!`}
    />
    <Form.Check 
      type="radio"
      name="group1"
      id={`default-radio`}
      label={`No`}
      />
</Form>

name="group1" 使按钮切换。如果您不想切换，请给它们不同的名称或不要命名。

希望这能帮助像我一样偶然遇到这个问题的人。

- ZiCode