react-bootstrap ButtonGroup como botones de opción

Solución:

El marco ha cambiado desde la respuesta aceptada y ahora han replicado el comportamiento del grupo de opciones del marco Bootstrap. Todo lo que necesita hacer ahora es agregar un nombre de grupo a cada opción en el grupo:

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

Así que terminé anidando una radio Input en el Button como lo haría normalmente en 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>
  )
}

También anulé el valor predeterminado .radio css para corregir cómo se muestra.

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

React-bootstrap tiene planes de implementar RadioGroup eventualmente: https://github.com/react-bootstrap/react-bootstrap/issues/342

Algunas de las respuestas de esta página no funcionan. Quizás las cosas hayan cambiado desde entonces.

Reuní esto con la ayuda del sitio web 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> 

Para que el conjunto de botones de opción funcione como un solo grupo, debe darles un nombre (de modo que solo se seleccione un botón de opción en un momento dado).

Agregar un control de formulario hace que los bordes de la entrada estén bien redondeados, pero también hace que la etiqueta del botón de opción sea editable. Si esto es un problema, puede omitir el control de formulario.

Si desea una apariencia diferente, puede probar esto.

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

Sin embargo, con estos, obtener el valor y el manejo de Cambio fue difícil. Finalmente usé otro control.

Este es un paquete npm llamado react-radio-group. Tienes que instalarlo ejecutando esta línea en el comando.

npm install react-radio-group

Luego impórtelo en su archivo.

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

Aquí está el código para el grupo de botones.

<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 es donde he dado los estilos.

---

---

Utiliza Nuestro Buscador