Hỏi về sự kiện bấm ra ngoài component

#1

Cho mình xin hỏi có cách nào để biết khi user bấm ra ngoài một component nào đó ở trong React-Native không?
Ví dụ như bấm ra ngoài TextInput thì chạy blur, hoặc tắt popup đi.
Hoặc ví dụ giống như ô tìm kiếm của dạy nhau học, bấm vào kính lúp thì hiện ra popup/component tìm kiếm, bấm ra ngoài thì nó biến mất.
Mình đã thử dùng PanResponder (onStartShouldSetPanResponder, đặt ở view tổng), và nhược điểm của nó là nó steal hết quyền respond của các component khác, nếu chỉ handle ở đây rồi return true thì chỉ được event kiểu như onPressDown. Mình cần event kiểu như onPressUp ấy, chứ không phải onPressDown.

#2

Javascript Native thì bạn chặn Bubble (sự kiện nổi bọt trong nhiều lớp Document Object)
event.stopPropagation()
Chú ý: đặt trong sự kiện của lớp con :slight_smile:

#3

Mình dùng React Native và mình không biết đặt event.stopPropagation() ở đâu cả :frowning:

#4

Ví dụ cho bạn dễ thấy như này:

Ta có các đối tượng DOM:
<body>
<input id="search"/>
</body>

Script bắt sự kiện:
var el_child = document.getElementById( ‘search’ );
el_child.addEventListener( ‘mousedown’ , function( event ){
event.stopPropagation();
}
var el_parent = document.body;
el_parent.addEventListener( ‘mousedown’ , function(){
el_child.style.borderColor = “red”;
}

Có nghĩa là <input> nằm trong <body> xảy ra trường hợp:

  • Khi input được click thì thằng body nó cũng chạy sự kiện click của nó luôn, nên mình dùng stopPropagation để chặn nó lại :slight_smile:
    Mình viết tay trên đt nếu có lỗi xảy ra bạn thông cảm nhé :slight_smile:
#5

Không bạn ơi, React Native làm gì có mấy cái đó như HTML đâu.

#6

Mình chỉ mô tả thôi , còn dùng Reactjs bạn làm như này:


83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?