如果表单不完整，请取消componentWillUnmount [英] Cancel componentWillUnmount if a form is incomplete

问题描述

我有一个带有redux-form的表单设置，并且基本上想要创建一个场景，如果在任何表单的输入中填充了内容，并且您尝试离开页面，则会收到提示。

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

推荐答案

如果您正在使用react-router，那么您可以点击 routerWillLeave ;请参阅文档： https://github.com/ ReactTraining / react-router / blob / master / docs / guides / ConfirmingNavigation.md

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

更新

提供一个例子有点困难，这很粗糙且未经测试。

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

基本上，只要用户尝试导航，routerWillLeave就会触发。当用户进行更改时，将脏状态值更新为true。文档应该涵盖您需要知道的其余内容（同时确保您运行的是2.4.0版本）。

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+).

这篇关于如果表单不完整，请取消componentWillUnmount的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！