Estoy completando mi menú desplegable dinámicamente y, a veces, termino teniendo un solo elemento en el menú desplegable. Para múltiples elementos, no hay problema, onChange() de mi etiqueta de selección funciona perfectamente. Sin embargo, cuando solo hay 1 elemento, onChange() no se invoca. ¿Como puedó resolver esté problema? ¡Gracias!
getOptions(){ var dynamicOptions = this.props.something const returnedOptions = [] for(int i=0; i< dynamicOptions.length;i++){ returnedOptions.push(<option value = {dynamicOptions[i]}>something</option> } return dynamicOptions; } return( <select onChange=this.onchangemethod, value = {something}> {this.getOptions()} </select> )Estaría teniendo el mismo problema si el usuario quisiera seleccionar la primera opción de muchas, ya que sería la ya seleccionada y el usuario no necesitaría volver a seleccionarla.
Una solución es especificar siempre una opción "vacía" con un texto de marcador de posición
<select onChange={this.onchangemethod}> <option value="">Please choose an option</option> {this.getOptions()} </select>De esta forma, siempre tendrás al menos dos opciones, y el usuario tendrá que abrir y seleccionar una.
Una alternativa es preseleccionar la primera opción para que, nuevamente, en caso de inacción del usuario, haya una opción seleccionada.
for(int i=0; i < dynamicOptions.length; i++) { const optionProperties = {value: dynamicOptions[i]}; if (i === 0) { optionProperties.selected: true }; returnedOptions.push(<option {...optionProperties}>something</option>); }