IT技术 - 如果表单不完整，则取消 componentWillUnmount - 吾爱随笔录

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

目的是在单击Cancel 时取消页面卸载或页面导航。我尝试创建一个条件，如果满足，它只会return导航离开当前页面。

这可能是很自然的，而且我还不了解 react/react-router 工作流程，但目前有人能够解释最好的方法吗？如果有什么事情没有得到满足，一般来说有什么东西可以让我停止卸载吗？

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

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