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 proyecto014

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state ={
      dia: 'Martes'
    }
    this.cambioDia = this.cambioDia.bind(this);
  }
  render() {
    return (
      <div>
        <p><select value={this.state.dia} onChange={this.cambioDia}>
        <opcion>Lunes</opcion>
        <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:{this.state.dia}</p>
      </div>
    );
  }

  cambioDia(e) {
    this.setState({
      dia: e.target.value
    })
  }
}

export default App;

En la definición del 'estado' de la componente iniciamos con alguno de los valores que contiene el control 'select':

    super(props);
    this.state ={
      dia: 'Martes'
    }

En el método render al definir la etiqueta 'select' inicializamos la propiedad value con el 'estado':

  render() {
    return (
      <div>
        <p><select value={this.state.dia} onChange={this.cambioDia}>
        <opcion>Lunes</opcion>
        <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:{this.state.dia}</p>
      </div>
    );
  }

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

  cambioDia(e) {
    this.setState({
      dia: e.target.value
    })
  }

En el navegador tenemos:

control select react

Problema

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

App.js

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dias: ['Lunes','Miércoles']
    }
    this.cambioDia = this.cambioDia.bind(this);
  }
  render() {
    return (
      <div>
        <p><select multiple value={this.state.dias} onChange={this.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>
        Día seleccionado:{this.state.dias.map((elemento)=>{
          return (<p>{elemento}</p>)
        }
        )}
      </div>
    );
  }

  cambioDia(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);
      }      
    }    
    this.setState({
      dias: seleccionadas
    })
  }
}

export default App;

Mostramos dos opciones del control inicialmente seleccionadas:

    this.state = {
      dias: ['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 al 'estado' de la componente:

  cambioDia(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);
      }      
    }    
    this.setState({
      dias: seleccionadas
    })
  }

En el navegador tenemos:

control select selección múltiple react