react-bootstrap ButtonGroup 作为单选按钮

Question

我正在尝试将一组 react-bootstrap 按钮组成一个单选按钮集。我可以用 bootstrap 和 <input type="radio"> 元素轻松做到这一点，但无法弄清楚如何用 react-bootstrap 做到这一点。以下代码允许用户 select 每个按钮，而不是只有一个。

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"/>

Answer 1

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

_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>
    );
}

Answer 2

所以我最终在 Button 中嵌套了一个收音机 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

Answer 3

自接受的答案以来，框架发生了变化，他们现在已经复制了 Bootstrap 框架的选项组行为。您现在需要做的就是为组中的每个选项添加一个组名：

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

Answer 4

仅使用对我有用的标签。确保它们都具有相同的名称="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>

Answer 5

此页面上的某些答案无效。也许从那以后情况发生了变化。

我在 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>

classNames 是我给出样式的地方。

Answer 6

现在是 2022 年，所以图书馆搬家了。

以下是创建 yes/no 收音机的方法：

<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" 使按钮切换。如果您不想切换，请给它们不同的名称或不命名。

希望这对可能像我一样偶然发现这个问题的人有所帮助。

react-bootstrap ButtonGroup 作为单选按钮

react-bootstrap ButtonGroup as radio buttons

react-bootstrap