Es la primera vez que escribo, ¡hola a todos!
Estoy haciendo una aplicación que me ayudará a memorizar datos geográficos.
Tengo un mapa con marcadores, cuando hago clic en cualquiera de estos marcadores aparece una ventana emergente en la que tengo una entrada. Estoy comparando el valor de entrada con el conjunto de datos de entrada para ver si mi respuesta fue correcta o no. El caso es que también me gustaría cambiar el color del marcador (ImageOverlay) a verde tan pronto como mi respuesta sea correcta y a rojo si es incorrecta (tan pronto como aparezca cualquier valor).
El principal problema que tengo es que esos marcadores se mapean desde un objeto que se obtiene de firebase, lo que significa que cada entrada tiene que cambiar el color del marcador correspondiente y solo ese marcador.
Espero haberlo explicado claramente. ¡Muchas gracias de antemano!
displayPins que asigna datos de un documento de firebase:
const displayPins = doc.map((d) => { return ( <ImageOverlay className="img-overlay" key={d.id} bounds={[ [d.latitude - 2, d.longitude - 2], [d.latitude + 2, d.longitude + 2], ]} interactive={true} url={`./${d.shape}`} > <Popup> <input type="text" data-tag={d.name} onChange={valueCompare}></input> <button onClick={() => { console.log(test); }} ></button> </Popup> </ImageOverlay> );});Cambio de entrada:
const valueCompare = (e) => { const data = e.target.dataset.tag; const value = e.target.value; if (data != value) { console.log("WRONG"); } else { console.log("CORRECT"); }};CSS
.img-overlay { filter: brightness(0) saturate(100%); } .img-overlay-wrong { filter: invert(10%) sepia(95%) saturate(7496%) hue-rotate(11deg) brightness(97%) contrast(120%); } .img-overlay-correct { filter: invert(69%) sepia(61%) saturate(4725%) hue-rotate(78deg) brightness(112%) contrast(128%); }Necesita algunos estados adicionales para almacenar los resultados de sus cuestionarios y diseñar sus superposiciones de imagen en consecuencia.
Un cambio mínimo en su código actual podría consistir en tener un diccionario de estado adicional:
function MapContent({ doc }) { // State to store results // { id: true or false (quizz result for doc id) } const [resultsDictionary, setResults] = useState({}); function result2class(id) { if (id in resultsDictionary) { return resultsDictionary[id] ? "img-overlay-correct" : "img-overlay-wrong"; } else { return "img-overlay"; } } const valueCompare = (e, id) => { const data = e.target.dataset.tag; const value = e.target.value; let result; if (data != value) { console.log("WRONG"); result = false; } else { console.log("CORRECT"); result = true; } // Shallow clone to force React to see a change setResults({ ...resultsDictionary, [id]: result, // new result }); }; return (<> {doc.map((d) => ( <ImageOverlay className={result2class(d.id)} key={d.id} bounds={[ [d.latitude - 2, d.longitude - 2], [d.latitude + 2, d.longitude + 2], ]} interactive={true} url={`./${d.shape}`} > <Popup> <input type="text" data-tag={d.name} onChange={(e) => valueCompare(e, d.id)}></input> <button onClick={() => { console.log(test); }} ></button> </Popup> </ImageOverlay> ))} </>); }