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