Soy nuevo en React y estoy usando Semantic-ui-react. Estoy tratando de usar el menú desplegable.
Cuando quiero obtener mi valor del menú desplegable y llamar a mi función. Mi evento obtiene algún objeto proxy.
handleTagChange(e) { console.log("handleTagChange"); console.log(e); }Pero si agrego algo más como test en la función, e.target.value funciona y test es el objeto proxy. ¿Porqué es eso?
handleTagChange(test, e) { console.log("handleTagChange"); console.log(test); console.log(e); }Todos los controladores de eventos que implementan los componentes semantic-ui-react devuelven el evento React Synthetic como el primer argumento (como lo haría Vanilla React) y los accesorios del componente + estado relevante como el segundo argumento.
Usando tu ejemplo:
handleTagChange(e, data) { console.log("handleTagChange"); console.log(e); // React Synthetic Event console.log(data.name); // `name` prop console.log(data.value); // `value` that was just selected }Problema al formalizar este cambio: https://github.com/Semantic-Org/Semantic-UI-React/issues/623
Explicación de la razón detrás de esto de la discusión aquí: https://github.com/Semantic-Org/Semantic-UI-React/issues/638
event.targetes una propiedad de evento del navegador. Sin embargo, muchos componentes de la interfaz de usuario semántica, como Dropdown, Checkbox y Radio, no funcionan directamente con los controles de formulario nativos del navegador, comoinputyselect. Se construyen utilizando marcado estilizado y estado interno personalizado.Debido a esto, no hay eventos de navegador nativos disponibles para determinadas devoluciones de llamada. Esta es la razón por la que todos los eventos de cambio en Semantic-UI-React proporcionan primero el evento (cuando está disponible), pero también un segundo argumento que contiene los datos que necesita. Nunca debería tener que acceder al evento del navegador nativo para la mayoría de las tareas.