React хук useClickOutside
В ВМ уже предоставлены index.html
и script.js
. В общем, вам нужно только добавить код в script.js
и style.css
.
Этот код обрабатывает событие клика вне обёрнутого компонента. Он работает путём создания пользовательского хука, который принимает ref
и callback
для обработки события click
. Хуки useEffect()
используется для добавления и очистки события click
, в то время как хук useRef()
используется для создания ref
для компонента клика и передачи его в хук 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")} />
);
Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.