react-bootstrap ButtonGroup come pulsanti di opzione

Question

Sto provando a creare un gruppo di pulsanti di riavvio-avvio in un set di pulsanti di opzione. Posso farlo facilmente con il bootstrap con gli elementi <input type="radio">, ma non riesco a capire come farlo con react-bootstrap. Il seguente codice consente all'utente di selezionare ogni pulsante, invece di uno solo.

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

Il quadro è cambiato da quando la risposta accettata e ora hanno replicato il comportamento gruppo di opzioni di framework Bootstrap. Tutto quello che devi fare ora è aggiungere un nome di gruppo a ciascuna opzione nel gruppo:

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

Answer 2

Ho appena incontrato lo stesso problema e risolto utilizzando lo stato del componente:

_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

così ho finito su annidare una radio Input nello Button come faresti normalmente in 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> 
) 
} 

Ho anche escludeva il CSS predefinito .radio di risolvere come è visualizzata.

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

React-bootstrap ha in programma di implementare RadioGroup fine: https://github.com/react-bootstrap/react-bootstrap/issues/342

Answer 4

Utilizzare solo i tag ha funzionato per me. Assicurati che abbiano tutti lo stesso nome = "valore-gruppo-radio-qui". Per ottenere uno dei pulsanti da selezionare su render usa check = {bool}. Ho anche disabilitato = {bool} per mostrare ma non consentire alcune scelte. Ho optato per l'utilizzo di onClick che sembra funzionare. Infine, questo è tutto in una finestra di dialogo e l'offset era necessario per mantenere i pulsanti radio da arrossire contro il bordo sinistro.

---

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