React useClickOutside Hook
index.html
y script.js
ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a script.js
y style.css
.
Este código maneja el evento de hacer clic fuera de un componente envuelto. Funciona creando un hook personalizado que toma una ref
y una callback
para manejar el evento click
. El hook useEffect()
se utiliza para adjuntar y limpiar el evento click
, mientras que el hook useRef()
se utiliza para crear una ref
para el componente de clic y pasarlo al hook useClickOutside
.
const useClickOutside = (ref, callback) => {
const handleClick = (e) => {
if (ref.current && !ref.current.contains(e.target)) {
callback();
}
};
React.useEffect(() => {
document.addEventListener("click", handleClick);
return () => {
document.removeEventListener("click", handleClick);
};
});
};
const ClickBox = ({ onClickOutside }) => {
const clickRef = React.useRef();
useClickOutside(clickRef, onClickOutside);
return (
<div
className="click-box"
ref={clickRef}
style={{
border: "2px dashed orangered",
height: 200,
width: 400,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<p>Click fuera de este elemento</p>
</div>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(
<ClickBox onClickOutside={() => alert("click fuera")} />
);
Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.