15 - Formularios: control select

Otro control que debemos ver como lo trabaja la librería React es el 'select'.

Veamos como procesar un control HTML select de selección única. Debemos definir la propiedad value directamente al elemento 'select' y asociarlo con el 'estado'.

Problema

Mostrar en un control de tipo 'select' los días de la semana. Cuando el operador lo selecciona mostrar cual se seleccionó en la página.

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

import {useState} from 'react';

function App() {
  const [dia,setDia]=useState('Lunes')

  function cambioDia(e) {
    setDia(e.target.value)
  }

  return (
    <div>
      <p><select value={dia} onChange={cambioDia}>
      <option>Lunes</option>
      <option>Martes</option>
      <option>Miércoles</option>
      <option>Jueves</option>
      <option>Viernes</option>
      <option>Sábado</option>
      <option>Domingo</option>
      </select></p>
      <p>Día seleccionado:{dia}</p>
    </div>
  );
}

export default App;

Creamos una variable de estado con un string que corresponde al primer elemento del control select:

  const [dia,setDia]=useState('Lunes')

En bloque JSX definimos la etiqueta 'select' inicializamos la propiedad value con la variable de estado 'dia':

  return (
    <div>
      <p><select value={dia} onChange={cambioDia}>
      <option>Lunes</option>
      <option>Martes</option>
      <option>Miércoles</option>
      <option>Jueves</option>
      <option>Viernes</option>
      <option>Sábado</option>
      <option>Domingo</option>
      </select></p>
      <p>Día seleccionado:{dia}</p>
    </div>
  );

Cada vez que el operador selecciona un elemento del control 'select' lo acualizamos al dispararse el evento onChange:

  function cambioDia(e) {
    setDia(e.target.value)
  }

En el navegador tenemos:

Problema

Modificar el ejercicio anterior para permitir las selecciones múltiples del control HTML 'select'.

App.js

import {useState} from 'react';

function App() {
  const [dias,setDias]=useState(['Lunes','Miércoles'])

  function cambioDias(e) {
    const opciones = e.target.options
    const seleccionadas = []
    for (let i = 0; i < opciones.length; i++) {
      if (opciones[i].selected) {
        seleccionadas.push(opciones[i].value)
      }      
    }    
    setDias(seleccionadas)
  }

  return (
    <div>
      <p><select multiple value={dias} onChange={cambioDias}>
      <option>Lunes</option>
      <option>Martes</option>
      <option>Miércoles</option>
      <option>Jueves</option>
      <option>Viernes</option>
      <option>Sábado</option>
      <option>Domingo</option>
      </select></p>
      Días seleccionados:{dias.map((dia)=>{
          return (<p>{dia}</p>)
        }
        )}
    </div>
  );
}

export default App;

Creamos una variable de estado mediante un Hook que almacene un vector de string:

  const [dias,setDias]=useState(['Lunes','Miércoles'])

Cuando se dispara el evento de cambio cuando el operador selecciona una o más opciones procedemos a verificar cuales son las seleccionadas y generar un nuevo vector que le asignaremos a la variable de estado de la componente llamada dias y accedida por la función setDias:

  function cambioDias(e) {
    const opciones = e.target.options
    const seleccionadas = []
    for (let i = 0; i < opciones.length; i++) {
      if (opciones[i].selected) {
        seleccionadas.push(opciones[i].value)
      }      
    }    
    setDias(seleccionadas)
  }

En el navegador tenemos: