16 - Formularios: controles radio

Otro elemento muy común en un formulario HTML son los controles 'radio'. Veremos como podemos almacenar en el 'estado' cual elemento radio se encuentra seleccionado en todo momento.

Problema

Disponer tres controles de tipo radio que se encuentren asociados que representan si la persona tiene estudios 'primario', 'secundario' o 'universitario'.

Como primer paso creamos una aplicación con create-react-app proyecto015

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      estudios: 'secundario'
    }
    this.cambioEstudios = this.cambioEstudios.bind(this);
  }

  render() {
    return (
      <div>
        <p><input type="radio" value="primario" checked={this.state.estudios==='primario'}
          onChange={this.cambioEstudios} />Primario</p>
        <p><input type="radio" value="secundario" checked={this.state.estudios==='secundario'}
          onChange={this.cambioEstudios} />Secundario</p>
        <p><input type="radio" value="universitario" checked={this.state.estudios==='universitario'}
          onChange={this.cambioEstudios} />Universitario</p>
        <p>Estudio seleccionado: {this.state.estudios}</p>
      </div>
    );
  }

  cambioEstudios(e) {
    this.setState({
      estudios: e.target.value
    })
  }
}

export default App;

En el constructor almacenamos en el 'estado' el tipo de estudios con un valor por defecto:

  constructor(props) {
    super(props);
    this.state = {
      estudios: 'secundario'
    }
    this.cambioEstudios = this.cambioEstudios.bind(this);
  }

En el método render() en la propiedad checked debemos almacenar un 'true' si queremos que el control 'radio' aparezca seleccionado y un false en caso contrario. Disponemos una expresión que retorna true o false:

        <p><input type="radio" value="primario" checked={this.state.estudios==='primario'}
          onChange={this.cambioEstudios} />Primario</p>

Cada vez que el operador selecciona un radio se ejecuta el método cambioEstudios donde actualizamos el 'estado' con el valor del 'radio' seleccionado:

  cambioEstudios(e) {
    this.setState({
      estudios: e.target.value
    })
  }

Al cambiar el 'estado' se vuelve a ejecutar el método render() y se actualiza el nuevo 'radio' seleccionado.

Si no queremos administrar los controles radio con React deberemos definir la propiedad 'name' almacenando un mismo valor en todos los radios que estén agrupados:

<p><input type="radio" value="primario" name="estudios" />Primario</p>
<p><input type="radio" value="secundario" name="estudios" />Secundario</p>
<p><input type="radio" value="universitario" name="estudios" />Universitario</p>

Dependiendo de la aplicación que tenemos que desarrollar necesitaremos tener o no un control de los 'radio' mediante el 'estado' de React.