0
Ngăn sự kiện reload page
Hello mn ! Mình có vấn đề này mong được các bạn giúp đỡ. Minh đang làm project bằng React, App của mình có chứa Form nhập liệu. Giờ m muốn bắt sự kiện khi người dùng reload page (nhấn F5 hoặc nút refresh của browser) thì sẽ ngăn sự kiện reload lại và hiện pop-up cảnh báo với người dùng ( nội dung là nếu reload dữ liệu đang nhập sẽ bị mất hết, bạn có muốn không ?)
Đây là đoạn code của mình:
componentDidMount() {
window.addEventListener('beforeunload', this.handleLeavePage);
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleLeavePage);
}
handleLeavePage = (event) => {
event.preventDefault();
this.setState({openPopup: true});
}
Nhuwng mình test thử thì nó không chặn được và vẫn bị load lại . Các bạn có thể giúp m được không. Mình xin cám ơn nhiều ạ !
Thêm một bình luận
2 CÂU TRẢ LỜI
+1
Bạn thử như này xem được không
componentDidMount() {
window.onbeforeunload = function() {
this. handleLeavePage();
return;
}.bind(this);
}
tks bạn, để tối về mình check lại nhé
@quankm1097 mình test thừ không được bạn ơi, nó không ngăn được sự kiện và vẫn bị reload lại page
Các b giúp đỡ m với
Bác có thể thử đoạn JS này:
window.onbeforeunload = function(){
return "Are you sure you want to leave our website?";
};
T không chắc là có thể customize lại cái message.
Bác có thể tham khảo 1 số workaround này:
https://stackoverflow.com/questions/2921206/onunload-message-needed-for-external-links
