Estoy haciendo una especie de juego de arrastrar y soltar en el que haces coincidir los logotipos con su nombre correspondiente.
Si el usuario hace coincidir el logotipo con el nombre correctamente, el campo en el que podría colocar el logotipo obtiene clases adicionales.
Como esto:
if (isCorrectMatching) { event.target.classList.add("dropped"); draggableElement.classList.add("dragged"); event.target.classList.add("dragged"); event.target.setAttribute("draggable", "false"); draggableElement.setAttribute("draggable", "false"); event.target.innerHTML = `<i class="fab fa-${draggableElementBrand}" style="color: ${draggableElement.style.color};"></i>`; }Si se encuentran todas las coincidencias, el usuario puede pasar al siguiente nivel, mi problema es que estas clases adicionales se quedan allí, ¿cómo las elimino?
Los estoy mapeando así:
<div className="containerItems"> {draggableItems.map((x, i) => { return ( <div className="draggable-items"> <i onDragStart={(e) => dragStart(e)} className={`draggable fab fa-${x}`} id={x} draggable="true" ref={draggableOnes.current[i]} ></i> </div> ); })} </div>; { matchingPairs.map((x, i) => { return ( <section className="matching-pairs"> <div className="matching-pair"> <span className="label">{x}</span> <span className="droppable" // ref={droppableOnes.current[i]} onDragEnter={(e) => dragEnter(e)} onDragOver={(e) => dragOver(e)} onDragLeave={(e) => dragLeave(e)} onDrop={(e) => drop(e)} data-brand={x} ></span> </div> </section> ); }); }Parece que no puedo resolver este, por ejemplo, ¿cómo elimino todas las clases que agregué cuando hubo una coincidencia correcta?
Me gustaría eliminar básicamente todo lo que he agregado en mi if (isCorrectMatching) .
Intenté usar refs pero no funcionó. ¿Cuál es el camino a seguir para esto?
En React, no manipulas directamente los elementos DOM (bueno, casi nunca), incluidas sus listas de clases. En cambio, mantiene su información de estado en el componente y usa esa información de estado para representar los elementos que componen su componente (incluidas sus clases). React luego comparará los elementos renderizados que devuelvas con el DOM y realizará los cambios necesarios (como actualizar classList ). Entonces, en su código, cuando vea que tiene una coincidencia correcta, no modificaría directamente las listas classList de esos elementos DOM, actualizaría su estado para recordar la coincidencia y usaría esa información de estado en el siguiente renderizado para poner las clases apropiadas en los elementos que se renderizan.
Aquí hay un ejemplo más simple con una casilla de verificación, pero es el mismo concepto general:
const {useState} = React; const Example = () => { const [isChecked, setIsChecked] = useState(false); return <div> <label> <input type="checkbox" checked={isChecked} onChange={() => setIsChecked(flag => !flag)} /> Ticked </label> <div className={isChecked ? "yes" : "no"}> Example </div> </div>; }; ReactDOM.render(<Example />, document.getElementById("root")); .yes { color: green; } .no { color: #d00; } label { user-select: none; } <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> Observe cómo isChecked del estado miembro determina qué clases tiene el div y se actualiza marcando/desmarcando la casilla de verificación.