3

I have a form setup with redux-form and basically want to create a scenario where if there's content filled in any of the form's inputs and you try to navigate away from the page you get a prompt.

The intent is to cancel the page unmount or page nav if they click Cancel. I tried creating a conditional, that if fulfilled would just return but it still navigates away from the current page.

This is probably natural and that I'm not privy to the react/react-router workflow just yet but for the time being would anyone be able to explain the best approach for this? Is there something in general that would allow me to stop an unmount if something is unmet?

import { reduxForm } from 'redux-form';

class Form extends Component {
  componentWillUnmount() {
    if (!this.props.pristine && !confirm('Are you sure you want to navigate away from this page?')) {
      return;
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={ handleSubmit(this.props.onSubmit) }>
        ...
      </form>
    );
  }
}

...

export default connect(mapStateToProps, null)(reduxForm({
  form: 'Form',
  enableReinitialize: true,
  validate
})(Form));
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119

1 Answers1

1

If you're using react-router, then you can tap into routerWillLeave; see the documentation: https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md

UPDATE

It's a bit tough to provide an example, this is rough and untested.

import { reduxForm } from 'redux-form';

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

  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave.bind(this));
  }

  routerWillLeave(nextLocation) {
    const { dirty } = this.state;

    if (dirty) {
      return 'You have unsaved information, are you sure you want to leave this page?'
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={ handleSubmit(this.props.onSubmit) }>
        ...
      </form>
    );
  }
}

Basically routerWillLeave will fire anytime the user attempts to navigate. When a user makes a change, update the dirty state value to true. The documentation should cover the rest that you need to know (also make sure you're running version 2.4.0+).

Jeff Wooden
  • 5,339
  • 2
  • 19
  • 24
  • Would you be able to provide an example based off my code? I tried implementing the example code on github but I get nothing. – Carl Edwards Jan 06 '17 at 16:32
  • I get `index.js:23Uncaught TypeError: Cannot read property 'setRouteLeaveHook' of undefined` – Carl Edwards Jan 06 '17 at 16:47
  • I'm using `react-router": "^3.0.0` btw – Carl Edwards Jan 06 '17 at 16:49
  • That's dependent on your setup, you need to make sure you're using withRouter: https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options You could try the old way too, but I don't recommend that route: `this.context.router.setRouteLeaveHook(route, this.routerWillLeave.bind(this));` – Jeff Wooden Jan 06 '17 at 16:54
  • I think you need to wrap the export of your Form component with the withRouter() HOC to get "this.props.router": https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.4.0.md – Jeff McCloud Jan 06 '17 at 16:55
  • I'm still fairly new to the HOC paradigm and was just wondering, if I already have it wrapped with reduxForm is it possible to wrap it again with withRouter? – Carl Edwards Jan 06 '17 at 16:58
  • I posted an update to how my component is currently being wrapped and exported. – Carl Edwards Jan 06 '17 at 17:01
  • Yes it is, I would recommend checking out a boilerplate which can help you set things up properly. There are tons out there, here is one I found on a Google search: https://github.com/davezuko/react-redux-starter-kit – Jeff Wooden Jan 06 '17 at 17:04
  • See this too: http://redux.js.org/docs/advanced/UsageWithReactRouter.html – Jeff Wooden Jan 06 '17 at 17:06
  • Thanks for the links. I think I managed to implement withRouter but now get the error: `Uncaught TypeError: Cannot read property '__id__' of undefined`. Providing example code in a minute. – Carl Edwards Jan 06 '17 at 17:09