Asked Dec 27th, 2019 9:50 AM 232 0 2
  • 232 0 2
0

Ngăn sự kiện reload page

Share
  • 232 0 2

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 ạ !

2 ANSWERS


Answered Dec 27th, 2019 10:40 AM
+1

Bạn thử như này xem được không

componentDidMount() {
    window.onbeforeunload = function() {
        this. handleLeavePage();
        return;
    }.bind(this);
}
Share
Hoang vn @wiliamfeng
Dec 27th, 2019 10:48 AM

tks bạn, để tối về mình check lại nhé

0
| Reply
Share
Hoang vn @wiliamfeng
Dec 28th, 2019 3:27 AM

@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

0
| Reply
Share
Hoang vn @wiliamfeng
Dec 30th, 2020 6:44 AM

Các b giúp đỡ m với

0
| Reply
Share
Answered Dec 31st, 2020 3:14 AM
0

Có ai ghé qua không giúp m với ạ 😢

Share
Dec 31st, 2020 10:04 AM

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.

0
| Reply
Share
Dec 31st, 2020 10:09 AM
0
| Reply
Share