React useClickOutside Hook

Introducción

En este laboratorio, aprenderemos a usar el hook useClickOutside en React para manejar eventos de clic que ocurren fuera de un componente específico. Este hook personalizado nos permite detectar fácilmente cuando un usuario hace clic fuera de un componente específico y realizar una acción basada en ese evento. Al final del laboratorio, tendrás una mejor comprensión de cómo usar este hook para crear componentes más interactivos y amigables para el usuario en tus aplicaciones React.

Skills Graph

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.

Resumen

¡Felicitaciones! Has completado el laboratorio del hook useClickOutside de React. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.