如果表单不完整，则取消 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.

如果他们单击取消，则目的是取消页面卸载或页面导航.我尝试创建一个条件，如果满足它只会 return 但它仍然导航离开当前页面.

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.

这可能是很自然的，而且我还不了解 react/react-router 工作流程，但就目前而言，有人能解释一下最好的方法吗?是否有一般的东西可以让我在未满足的情况下停止卸载?

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屋！