01/10/2018, 08:26

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

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.

Kollein Vĩnh viết 10:31 ngày 01/10/2018

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

明玉 viết 10:32 ngày 01/10/2018

event.stopPropagation

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

Kollein Vĩnh viết 10:40 ngày 01/10/2018

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
Mình viết tay trên đt nếu có lỗi xảy ra bạn thông cảm nhé

明玉 viết 10:39 ngày 01/10/2018

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

Kollein Vĩnh viết 10:29 ngày 01/10/2018

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

reactjs.org