Hook useClickInside de React

Introducción

En este laboratorio, aprenderemos cómo crear un hook personalizado de React llamado useClickInside. Este hook manejará el evento de hacer clic dentro de un componente envuelto y desencadenará una función de devolución de llamada. Usaremos los hooks useEffect() y useRef() para adjuntar y limpiar el evento click. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear hooks personalizados y manejar eventos en React.

Skills Graph

Hook useClickInside de React

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.

Para manejar un evento de clic dentro de un componente, se puede crear un hook personalizado llamado useClickInside que tome una ref y una callback. Use el hook useEffect() para adjuntar y limpiar el evento click, y el hook useRef() para crear una ref para su componente de clic y pasársela al hook useClickInside. Aquí está el código:

const useClickInside = (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);
    };
  }, [ref, callback]);
};

Puede usar este hook en su componente de la siguiente manera:

const ClickBox = ({ onClickInside }) => {
  const clickRef = React.useRef();
  useClickInside(clickRef, onClickInside);

  return (
    <div
      className="click-box"
      ref={clickRef}
      style={{
        border: "2px dashed orangered",
        height: 200,
        width: 400,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <p>Click inside this element</p>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <ClickBox onClickInside={() => alert("click inside")} />
);

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 useClickInside de React. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.