0
102
ViewsJavascript: elemento antepuesto cuando el detector de eventos activa el mouse ingresa
Me gustaría obtener algunos consejos de ustedes, ¿cómo puedo anteponer el elemento html cuando el detector de eventos escucha que entro con el mouse en el área del contenedor? Estoy usando ReactJS para construir mi interfaz. Encuentro un problema ya que no puedo anteponer el elemento html usando el destino del evento que proporciona la devolución de llamada del detector de eventos. He incluido mi fragmento de código de la siguiente manera:
box.addEventListener("mouseleave", function (evt) { evt.target.style.border = "unset"; }); box.addEventListener("mouseenter", function (evt) { evt.target.style.border = "1px solid red"; var div = document.createElement("div"); div.style.backgroundColor = "red"; div.style.height = "10px"; div.style.width = "10px"; evt.target.parentNode.insertBefore(evt.target,div); }); De hecho, me gustaría anteponer debajo de div al padre del contenedor cada vez que entro con el mouse en el contenedor div. 
Realmente aprecio tu contribución.
1 answers
Answer question0
Desafortunadamente, la forma en que lo intentas no es la forma de reaccionar.
Debe usar las declaraciones state y if en su código con React way .
Aquí hay una muestra para ti:
https://codesandbox.io/s/distracted-tree-1fpjnr
import { useState } from "react"; import "./styles.css"; export default function App() { const [isShowDiv, setIsShowDiv] = useState(false); return ( <div className="App" onMouseLeave={() => setIsShowDiv(false)} onMouseEnter={() => setIsShowDiv(true)} > {isShowDiv && ( <div style={{ background: "red", height: "50px", width: "100%" }}></div> )} <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }