react-bootstrap ButtonGroup als Radiobuttons

Question

Ich versuche eine Gruppe von React-Bootstrap-Buttons in ein Optionsfeld zu setzen. Ich kann dies einfach mit Bootstrap mit <input type="radio"> Elementen tun, aber kann nicht herausfinden, wie dies mit React-Bootstrap zu tun. Der folgende Code ermöglicht dem Benutzer, jede Schaltfläche statt nur einer auszuwählen.

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

Der Rahmen, da die akzeptierte Antwort geändert hat und sie haben nun die Möglichkeit, das Verhalten der Gruppe von Bootstrap Rahmen repliziert. Alles, was Sie jetzt tun müssen, ist, einen Gruppennamen zu jeder Option in der Gruppe hinzuzufügen:

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

Answer 2

Ich habe begegnet nur das gleiche Problem und löste es durch den Staat ist die Komponente mit:

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

So landete ich nistet ein Radio Input in der Button wie Sie normalerweise in Bootstrap tun würde.

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

ich überwog auch die Standard .radio CSS zu beheben, wie es angezeigt wird.

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

React-Bootstrap hat Pläne RadioGroup schließlich umzusetzen: https://github.com/react-bootstrap/react-bootstrap/issues/342

Answer 4

Nur mit den Tags arbeitete für mich. Stellen Sie sicher, dass sie alle den gleichen Namen haben = "radio-group-value-here". Um eine der Schaltflächen zum Rendern auszuwählen, verwenden Sie checked = {bool}. Ich habe auch deaktiviert = {bool} verwendet, um anzuzeigen, aber einige Auswahlmöglichkeiten zu verbieten. Ich entschied mich für onClick, das anscheinend funktioniert. Schließlich ist dies alles in einem Dialog und der Offset wurde benötigt, um zu verhindern, dass die Radiobuttons gegen die linke Kante ansteigen.

---

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