Desplegables en React - Select y onChange

1. Componente de selección personalizado en React
2. Usando JSX
3. Paquete react-select

Para crear aplicaciones interactivas, los desarrolladores de React deben crear elementos de entrada y manejar los eventos. Los formularios desplegables están muy extendidos y son uno de los tipos de entrada más útiles. Permiten a los usuarios seleccionar una de las muchas opciones o tener una seleccionada por defecto. Una vez seleccionada la opción, podemos acceder a su valor y almacenarlo en el estado del componente.

El propósito principal del formulario de selección es recopilar los datos de los usuarios. Por ejemplo, es posible que desee pedirles a los usuarios que seleccionen su género.

El propósito de los controladores de eventos es rastrear las acciones de los usuarios para actualizar el estado del componente. Cuando se trata del elemento <select/>, el controlador de eventos onChange es el más útil porque se activa cuando los usuarios seleccionan una <option/> diferente.

Componente de selección personalizado en React

Si necesita un elemento <select/> normal con funcionalidades complejas, probablemente sea mejor crear un componente separado. De esta forma, puede configurar controladores de eventos, almacenar valores seleccionados y, si es necesario, activar cambios en el componente principal. También puede utilizar props para introducir los datos en un componente select personalizado. Veamos un ejemplo simple:

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="1-10">1-10</option>
    		<option value="10-15">10-15</option>
    		<option value="15-20">15-20</option>
    		<option value="20+">20+</option>
   		</select>
    	<h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}

Este es un componente muy básico que encapsula las principales funcionalidades del elemento <select>. Los usuarios pueden seleccionar una de las opciones, y la propiedad de estado selectedValue almacenará el valor de su elección.

Tenga en cuenta que el evento change ocurre en el elemento <select>, no en sus hijos. Los usuarios tienen múltiples opciones para elegir, y siempre que cambien su elección, el controlador de eventos en el atributo onChange se ejecutará para actualizar el estado del componente.

Cada vez que cambia el estado, el componente se volverá a renderizar y mostrará el valor actualizado en el texto <h1>. Pruébelo usted mismo en el código de reproducción.

Representación de un array de opciones

A menudo, los componentes son mucho más útiles si ajustan su salida en función de los datos transmitidos a través de props. En nuestro ejemplo, tenemos un componente personalizado que incorpora las funcionalidades centrales del elemento <select>. Sin embargo, tener un conjunto de opciones codificadas de forma rígida en nuestro código JSX frustra el propósito de crear un componente personalizado. Sería mucho más práctico aceptar una serie de opciones a través de props y representar las opciones en consecuencia. He aquí un ejemplo:

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    <select onChange={(e) => handleChange(e)}>
    {this.props.options.map(arrayItem => <option value={arrayItem}>{arrayItem}</option>)}
    </select>
    <h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}
CustomSelect.defaultProps = {
  options: ["1-10", "10-15", "15-20", "20+"]
}

Este enfoque nos da más libertad para usar nuestro componente <CustomSelect> de muchas formas diferentes. Si creamos un elemento select varias veces, solo necesitaremos pasar matrices de opciones como props. Por ejemplo:

return (
    <div>
    ...
    <CustomSelect props=[firstArr]></CustomSelect>
    <CustomSelect props=[secondArr]></CustomSelect>
    ...
    </div>
    );

Componentes funcionales

Nuestros ejemplos hasta ahora solo usan componentes de clase. También puede crear componentes de selección personalizados con funciones. De hecho, desde la introducción de los ganchos, los desarrolladores de React están comenzando a favorecer fuertemente los componentes funcionales. Para obtener más información sobre las diferencias entre los componentes funcionales y de clase, lea esta guía.

Usando JSX

Si necesita usar <select> solo una vez, puede incluir el elemento directamente en su JSX. En caso de que no lo sepa, JSX es una sintaxis especial para React, que se parece mucho a la sintaxis HTML normal, pero les da a los desarrolladores más poder para crear aplicaciones dinámicas.

Así es como se vería una implementación JSX:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
        <p>Choose the size of the t-shirt</p>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="S">S</option>
    		<option value="M">M</option>
    		<option value="L">L</option>
    		<option value="XL">XL</option>
   		</select>
    </div>
    );
  }
}

Paquete react-select

Si está buscando una solución avanzada, considere instalar el paquete react-select, que proporciona un Select personalizado con amplias funcionalidades como autocompletar y selección múltiple. Revise su sitio web para comprender mejor las funciones.