React onbeforeunload - 不确定如何使用

Question

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>
   );
  }
}

Answer 1

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.... }

Answer 2

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:-)

Answer 3

useEffect(() => {
window.onbeforeunload = () => '';
return () => {
  window.onbeforeunload = null;
};}, []);

I did a same function. Hope It will help you