Javascript 如果表单不完整，取消组件将卸载

我有一个redux表单的表单设置，基本上想创建一个场景，如果表单的输入中有内容填充，并且您尝试导航离开页面，就会得到一个提示

其目的是在单击“取消”时取消页面卸载或页面导航。我尝试创建一个条件，如果满足，它将返回，但它仍然会离开当前页面

这可能是很自然的，我还不了解react/react路由器工作流，但目前是否有人能够解释最好的方法？如果有什么东西没有得到满足，是否有什么东西可以让我停止卸载

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

从'redux form'导入{reduxForm}；
类形式扩展组件{
组件将卸载（）{
如果（！this.props.pristine&&！confirm（'您确定要离开此页面吗？'））{
返回；
}
}
render（）{
const{handleSubmit}=this.props；
返回(
...
);
}
}
...
导出默认连接（MapStateTops，null）（reduxForm({
表格：'表格'，
enableReinitialize:true，
验证
})（表格））；

如果您使用的是react路由器，那么您可以点击

路由器willleave

；请参阅文档：

更新

举个例子有点难，这是粗糙的，未经测试的

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

从'redux form'导入{reduxForm}；
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
脏的：假的
};
}
componentDidMount（）{
this.props.router.setRouteLeaveHook（this.props.route，this.routerWillLeave.bind（this））；
}
routerWillLeave（下一个位置）{
const{dirty}=this.state；
如果（脏的）{
return“您有未保存的信息，是否确实要离开此页面？”
}
}
render（）{
const{handleSubmit}=this.props；
返回(
...
);
}
}

---

基本上，只要用户尝试导航，routerWillLeave就会触发。当用户进行更改时，将dirty state值更新为true。文档应包括您需要知道的其他内容（同时确保您运行的是2.4.0+版）。

您能提供一个基于我的代码的示例吗？我尝试在github上实现示例代码，但没有得到任何结果。我得到

index.js:23Uncaught类型错误：无法读取未定义的属性“setRouteLeaveHook”：“^3.0.0

bt这取决于您的设置，您需要确保您正在使用路由器：您也可以尝试旧方法，但我不建议这样的路由：

this.context.router.setRouteLeaveHook（route，this.routerWillLeave.bind（this））我认为您需要使用withRouter（）HOC包装表单组件的导出，以获得“this.props.router”：