así que tengo algo como esto:
El valor predeterminado es inglés de todos modos, pero quiero mostrar "inglés" en lugar de Seleccionar allí, también si selecciono cualquier otro idioma del menú:
https://i.stack.imgur.com/A1iDx.png
el valor todavía dice "Seleccionar" pero el contenido de la página web cambia de todos modos, ¿cómo puedo mostrar el valor si selecciono algo de la etiqueta?
código hasta ahora:
const [select, setSelectedOption] = React.useState(); const options = [ {value: 'English', label: 'English' }, { value: 'Japanese', label: 'Japanese' }, { value: 'Chinese', label: 'Chinese' }, { value: 'Korean', label: 'Korean' }, { value: 'Spanish', label: 'Spanish' }, ]; const handleChange = SelectedOption => { setSelectedOption(SelectedOption) localStorage.setItem("lang", SelectedOption.value); window.location.reload(false) // history.push(window.location.pathname); }; <div className="Language"> <h4>Language</h4> <Select value={select} onChange={handleChange} options={options} default={options[0].value} /> </div>Cualquier ayuda sería apreciada ! Lo que estoy intentando es.
Así que he hecho esto por ahora:
<h4>Language</h4> <Select defaultValue={options[0]} value={select} onChange={handleChange} options={options} autoFocus ={true} /> const handleChange = SelectedOption => { setSelectedOption({SelectedOption}) console.log(SelectedOption) localStorage.setItem("lang", SelectedOption.value); window.location.reload(false) };Aparece el valor "Inglés", pero cuando cambio a otro idioma, el valor "Inglés" permanece, pero la página cambia su idioma.
ok, obtuve la respuesta después de los rastros y el error, pero esto permanece fijo en una sola página, ¿alguien puede ayudarme si estos valores deben corregirse cuando navegamos a otras páginas? mi solución actual a la pregunta que publiqué es esta:
const options = [ {value: 'English', label: 'English' }, { value: 'Japanese', label: 'Japanese' }, { value: 'Chinese', label: 'Chinese' }, { value: 'Korean', label: 'Korean' }, { value: 'Spanish', label: 'Spanish' }, ]; const[select, setSelectedOption] = useState(options[0].value); const handleChange = SelectedOption => { console.log(SelectedOption.value) setSelectedOption(SelectedOption.value) localStorage.setItem("lang", SelectedOption.value); //window.location.reload(true) history.push(window.location.pathname); }; <div className="Language"> <h4>Language</h4> <Select value={select.value} defaultValue = 'English' onChange={handleChange} options={options} /> </div>El único problema es que si navego a otras páginas, los valores desaparecen y la etiqueta permanece vacía nuevamente.
Espero que administres el valor de 'seleccionar' a través de useState(). Si es así, el motivo de este comportamiento es después de seleccionar, el componente se vuelve a renderizar y establece el valor predeterminado nuevamente. Para superar eso, elimine el valor predeterminado y establezca el valor inicial en el atributo de valor en select.
const options = [ {value: 'English', label: 'English' }, { value: 'Japanese', label: 'Japanese' }, { value: 'Chinese', label: 'Chinese' }, { value: 'Korean', label: 'Korean' }, { value: 'Spanish', label: 'Spanish' }, ]; const[select, setSelectedOption] = useState(options[0].value); const handleChange = SelectedOption => { setSelectedOption(SelectedOption) localStorage.setItem("lang", SelectedOption.value); window.location.reload(false)}; <div className="Language"> <h4>Language</h4> <Select value={select} onChange={handleChange} options={options} autoFocus ={true} /> </div>