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
valueen<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.