Catch navigation events in SPFX webpart

%3CLINGO-SUB%20id%3D%22lingo-sub-109004%22%20slang%3D%22en-US%22%3ECatch%20navigation%20events%20in%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-109004%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EI%20have%20a%20spfx%20webpart%20written%20in%20react%20that%20I%20am%20using%20on%20a%20classic%20sharepoint%20editform.%20I%20want%20to%20prompt%20the%20user%20to%20save%20changes%20if%20he%20tries%20to%20navigate%20away%20from%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20tried%20putting%20logic%20in%20the%20componentWillUnmount%20method%20of%20my%20react%20class%2C%20but%20it%20does%20not%20get%20called%20when%20the%20user%20navigates%20away.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20can%20I%20handle%20this%20requirement%20in%20a%20react%20webpart%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-109033%22%20slang%3D%22en-US%22%3ERe%3A%20Catch%20navigation%20events%20in%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-109033%22%20slang%3D%22en-US%22%3E%3CP%3EAh%2C%20I%20found%20it.%20I%20put%20this%20in%20my%20webpart%20render%3C%2FP%3E%3CPRE%3EAh%2C%20I%20found%20it.%20I%20put%20this%20in%20my%20webpart%20render%20method%3A%0A%20this.reactElement%20%3D%20React.createElement(TrForm%2C%20formProps)%3B%0A%20%20%20%20%20%20var%20formComponent%3A%20TrForm%20%3D%20ReactDom.render(this.reactElement%2C%20this.domElement)%20as%20TrForm%3B%2F%2Frender%20the%20component%0A%20%20%20%20%20%20window.onbeforeunload%20%3D%20function%20(e)%20%7B%0A%20%20%20%20%20%20%20%20debugger%3B%0A%0A%20%20%20%20%20%20%20%20if%20(formComponent.state.isDirty)%20%7B%0A%20%20%20%20%20%20%20%20%20%20var%20dialogText%20%3D%20%22You%20have%20unsaved%20changes%2C%20are%20you%20sure%20you%20want%20to%20leave%3F%22%0A%20%20%20%20%20%20%20%20%20%20e.returnValue%20%3D%20dialogText%3B%0A%20%20%20%20%20%20%20%20%20%20return%20dialogText%3B%0A%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
Frequent Contributor

Hi,

I have a spfx webpart written in react that I am using on a classic sharepoint editform. I want to prompt the user to save changes if he tries to navigate away from the page.

 

I tried putting logic in the componentWillUnmount method of my react class, but it does not get called when the user navigates away.

 

How can I handle this requirement in a react webpart?

1 Reply

Ah, I found it. I put this in my webpart render

Ah, I found it. I put this in my webpart render method:
 this.reactElement = React.createElement(TrForm, formProps);
      var formComponent: TrForm = ReactDom.render(this.reactElement, this.domElement) as TrForm;//render the component
      window.onbeforeunload = function (e) {
        debugger;

        if (formComponent.state.isDirty) {
          var dialogText = "You have unsaved changes, are you sure you want to leave?"
          e.returnValue = dialogText;
          return dialogText;

        }
      }