0
154
ViewsEl valor de entrada de selección de reacción no se restablece en la actualización de la página
FWIW, estoy usando Gatsby implementado con AWS Amplify.
Tengo un selector de idioma simple en mi sitio web. Cuando abro el sitio en una pestaña nueva o en navegación privada, el comportamiento es el esperado. Actualmente está predeterminado en inglés y puede cambiar a alemán. Sin embargo, cuando realizo una simple actualización, el texto traducible en la página vuelve al inglés, mientras que lo que se muestra en la selección es "alemán". Sin embargo, lo más curioso es que inspeccionando la selección se parece a la imagen adjunta. Mientras que en la página muestra alemán seleccionado, en el HTML la opción de inglés ha selected="" . ¿Cuál es correcto, pero por qué muestra alemán?
const changeLanguage = (lang) => { i18n.changeLanguage(lang); }; ... <select value={i18n.language} onChange={(event) => changeLanguage(event.target.value)} 
2 answers
Answer question0
¿Te has encontrado con esta prueba de comportamiento en Firefox? Tuve el mismo problema en mi aplicación Gatsby y resultó ser un error de Firefox, ya que este comportamiento no ocurre en Chrome (no probé en otros navegadores).
Establecer autocomplete="off" en su etiqueta de selección como se indica en esta otra respuesta debería solucionar el problema.
0
Necesitaría ver el resto de su componente <select> para saber qué otros accesorios está configurando y cómo está completando los <option> . Sin embargo, ¿está configurando el accesorio selected en la <option> correcta al completar los elementos secundarios?
Además, no hay un atributo de value para el elemento <select> ( Seleccionar atributos ). Si está utilizando una biblioteca, debe hacer referencia a sus documentos. De lo contrario, con HTML directo, debe establecer la <option> selected al completar las <option> .
const languages = ['english', 'german']; const changeLanguage = (lang) => { i18n.changeLanguage(lang); }; ... <select // value={i18n.language} - there is no `value` prop for `select` element onChange={(event) => changeLanguage(event.target.value)} ... > {languages.map((language) => ( <option value={language} selected={language === i18n.language} /> ))} </select>Actualizar
@a.mola Vea la pregunta similar hecha aquí atributo de valor en la etiqueta <select> que no selecciona la opción predeterminada
Además, aquí hay un ejemplo de trabajo de un elemento <select> con el value en <select> vs selected en <option> :