Реакция-бутстрап ButtonGroup как переключатели

Я пытаюсь создать группу кнопок "реакция-бутстрап" в набор радиокнопок. Я легко могу сделать это с помощью бутстрапа с элементами <input type="radio">, но не могу понять, как это сделать с помощью реакции-бутстрапа. Следующий код позволяет пользователю выбирать каждую кнопку, а не только одну.

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

Ответы

Ответ 1

С момента принятия ответа изменилась структура, и теперь они реплицировали поведение группы параметров Bootstrap. Все, что вам нужно сделать, это добавить имя группы для каждой опции в группе:

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

Ответ 2

Итак, я вложил радио Input в Button, как обычно, в 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

Ответ 3

Я только что столкнулся с той же проблемой и решил ее, используя состояние компонента:

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

Ответ 4

Некоторые ответы на этой странице не работают. Возможно, с тех пор все изменилось.

Я собрал это с помощью сайта 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 было сложно. В конце концов я использовал другой элемент управления.

Это пакет 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 - это место, где я дал стили.

Ответ 5

Просто используя теги, сработанные для меня. Убедитесь, что все они имеют одинаковое значение name= "radio-group-value-here". Чтобы выбрать одну из кнопок, выбранных для рендеринга, используйте checked = {bool}. Я также использовал disabled = {bool}, чтобы показать, но запретить некоторые варианты. Я решил использовать onClick, который, похоже, работает. Наконец, все это в диалоговом окне, и смещение необходимо для того, чтобы радиокнопки не smogли против левого края.

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