React useClickOutside Hook
index.html
et script.js
ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js
et style.css
.
Ce code gère l'événement de clic en dehors d'un composant encapsulé. Il fonctionne en créant un crochet personnalisé qui prend une ref
et une callback
pour gérer l'événement click
. Le crochet useEffect()
est utilisé pour ajouter et nettoyer l'événement click
, tandis que le crochet useRef()
est utilisé pour créer une ref
pour le composant de clic et la passer au crochet 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 out of this element</p>
</div>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(
<ClickBox onClickOutside={() => alert("click outside")} />
);
Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.