Bắt sự kiện click bên ngoài Component React

Nếu bạn tự làm một react component như dropdown, modal, popover, không sớm thì muộn bạn sẽ rơi vào tình huống sao "Bắt sự kiện click bên ngoài component để đóng nó (modal, popover, dropdown) lại"

Đây là những gì bạn cần làm

1. Để biết sự kiện nằm trong hay ngoài component, chúng ta phải lấy được DOM của element, dùng ref để lấy tham chiếu đến DOM thực của component

const node = useRef();

...

return (
    <div ref={node}>
        ...
    </div>
)

2. Thêm một event listener cho sự kiện click ( mousedown )

useEffect(() => {
    //  thêm khi đã mount
    document.addEventListener("mousedown", handleClick);
    // dọn dẹp
    return () => {
        document.removeEventListener("mousedown", handleClick);
    }
}, [])

3. Bên trong handleClick node.current.contains(e.target) sẽ trả về true nếu click xuất phát bên trong ref node

const handleClick = e => {
    if (node.current.contains(e.target)) {
        return;
    }
    
    // outside
    ...
};

Code Little Neat trick to capture click outside with React Hook