0

If a state variable called someVar is true, then when user leaves page (refresh, back, [x] button on window/tab), they get a message. On the message, if they select Cancel, they stay on page. If they leave page, call a function (in this example, call doSomething()).

Note: I would like to use a class component, not functional component.

I have some code here with some parts being pseudocode. I also have a CodeSandbox that is identical to what you see below.

import React from 'react';
import {Button} from 'react-bootstrap';

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someVar: false
    }
  }

  componentDidMount() {
    window.addEventListener("beforeunload", this.handleUnload);
    return () => {
      window.removeEventListener("beforeunload", this.handleUnload);
    }
  }

  handleUnload = (e) => {
    e.preventDefault();
    if(this.state.someVar) {
        // then show custom modal
    } else {
        // don't show custom modal
    }
  }

  handleAlert = () => {
    if(yes) {
       doSomething();
    }
    if(no) {
       // nothing. stay on page
    }

  doSomething = () => {
      //call some functions
  }

  render() {
    return (
      <h2 onClick={() => { this.setState({ someVar: true }) }} >
        ClickMe
      </h2>
   );
  }
}
penguin
  • 143
  • 3
  • 11

3 Answers3

0

You don't need to use onbeforeunload. IMO it's enough to use componentWillUnmount life cycle as you're already using Class component.

import React from 'react';
import {Button} from 'react-bootstrap';

class Sample extends React.Component {
  // fix this life cycle
  componentWillUnmount() {
    this.handleUnload();
  }

  handleUnload = (e) => {
    e.preventDefault();
    if(this.state.someVar) {
        // then show custom modal
    } else {
        // don't show custom modal
    }
  }
  // the rest of the code ....
}
Kaung Myat Lwin
  • 1,049
  • 1
  • 9
  • 23
  • This does not address how to handle the yes or no for the modal that would popup. Would I be able to use a custom modal? – penguin Aug 12 '22 at 17:16
  • Hmm, sorry I didn't take account of that. In that case I usually use `react-router` to have some type of query inserted while the component is mounted. I fire the `this.handleUnload` just before the route changes and halt the component unmount cycle. https://stackoverflow.com/questions/43828224/how-can-i-prevent-the-unmount-in-react-components This is how you could do it. Could you try @rabbitman's answer under me too? :) – Kaung Myat Lwin Aug 12 '22 at 17:32
0

You can solve it this way as well.

  componentDidMount() {
    window.addEventListener('beforeunload', this.unload);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.unload);
  }

Just what not to use HOC :-)

rabbitman
  • 11
  • 2
0
useEffect(() => {
window.onbeforeunload = () => '';
return () => {
  window.onbeforeunload = null;
};}, []);

I did a same function. Hope It will help you

Steve Chan
  • 51
  • 4