React useClickOutside Hook

ReactReactBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

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

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StylingGroup(["Styling"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StylingGroup -.-> react/css_in_react("CSS in React") subgraph Lab Skills react/jsx -.-> lab-38373{{"React useClickOutside Hook"}} react/event_handling -.-> lab-38373{{"React useClickOutside Hook"}} react/hooks -.-> lab-38373{{"React useClickOutside Hook"}} react/css_in_react -.-> lab-38373{{"React useClickOutside Hook"}} end

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.