El evento onClick
no funciona con la etiqueta <option>
. Cómo usar el evento onClick
con la etiqueta de opción de selección. A cada opción se le debe dar un parámetro diferente.
async function localization(language) { localStorage.setItem("language", language); } useEffect(() => { localization(localStorage.getItem("language")); }, []); return( <select> <option onClick={() => localization("ru")}> <RussinFlagIcon /> Ru </option> <option onClick={() => localization("uz")}> <UzbekistanFlagIcon /> Uz </option> <option onClick={() => localization("en")}> <UKFlagIcon /> En </option> </select> )
Use onChange
en su lugar, así es como debería trabajar cuando se trata de <select>
. Puedes hacer algo como esto:
Observe el atributo de
value
en<option>
. El valor de la opción seleccionada será el valor de<select>
.
return( <select onChange = {(e)=> localization(e.target.value)}> <option value = "ru"> <RussinFlagIcon /> Ru </option> <option value= "uz"> <UzbekistanFlagIcon /> Uz </option> <option value="en"> <UKFlagIcon /> En </option> </select> )
Normalmente, la selección se usa con un [formulario][1], luego debe usar la devolución de llamada onChange:
const Select = () => { const handleChange = (e) => localStorage.setItem("language", e.target.value); return ( <label> <select name="languages" onChange={handleChange}> <option onClick={() => localization("ru")}> <RussinFlagIcon /> Ru </option> <option onClick={() => localization("uz")}> <UzbekistanFlagIcon /> Uz </option> <option onClick={() => localization("en")}> <UKFlagIcon /> En </option> </select> </label> ); };
Luego algunos comentarios sobre su código:
async function localization
no tiene que ser asíncrona si no tiene una Promesa en ella.