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 proyecto016

App.js

import { useState } from 'react';

function App() {
  const [estudios, setEstudios] = useState('primario')

  function cambioEstudios(e) {
    setEstudios(e.target.value)
  }

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

export default App;

Definimos una variable de estado con el tipo de estudios con un valor por defecto:

  const [estudios, setEstudios] = useState('primario')

En el bloque JSX 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={estudios === 'primario'}
        onChange={cambioEstudios} />Primario</p>

Cada vez que el operador selecciona un radio se ejecuta la función cambioEstudios donde actualizamos el 'estado' con el valor del 'radio' seleccionado:

  function cambioEstudios(e) {
    setEstudios(e.target.value)
  }

Al cambiar el 'estado' se vuelve a actualizar la componente y se actualiza el nuevo 'radio' seleccionado.

En el navegador tenemos:

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.