Cancelar componentWillUnmount se um formulário estiver incompleto
Eu tenho uma configuração de formulário com redux-form e basicamente quero criar um cenário em que, se houver conteúdo preenchido em alguma das entradas do formulário, você tentar sair da página e receber um prompt.
A intenção é cancelar a desmontagem da página ou a navegação da página, se clicaremCancelar. Eu tentei criar um condicional, que se cumprido seria apenasreturn
mas ainda sai da página atual.
Provavelmente isso é natural e que ainda não estou a par do fluxo de trabalho de reagir / reagir roteador, mas, por enquanto, alguém seria capaz de explicar a melhor abordagem para isso? Existe algo em geral que me permita parar uma desmontagem se algo não for atendido?
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));