Tengo una configuración de formulario con redux-form y básicamente quiero crear un escenario en el que si hay contenido completado en cualquiera de las entradas del formulario e intenta navegar fuera de la página, recibe un aviso.
La intención es cancelar el desmontaje de la página o la navegación de la página si hacen clic en Cancelar . Intenté crear un condicional, que si se cumpliera simplemente return pero aún navega fuera de la página actual.
Esto es probablemente natural y todavía no estoy al tanto del flujo de trabajo de reacción/reacción del enrutador, pero por el momento, ¿alguien podría explicar el mejor enfoque para esto? ¿Hay algo en general que me permita detener un desmontaje si algo no se cumple?
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));Si está utilizando el enrutador de reacción, puede acceder al routerWillLeave ; consulte la documentación: https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md
ACTUALIZAR
Es un poco difícil dar un ejemplo, esto es tosco y no probado.
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> ); } }Básicamente, routerWillLeave se activará cada vez que el usuario intente navegar. Cuando un usuario realiza un cambio, actualice el valor del estado sucio a verdadero. La documentación debe cubrir el resto de lo que necesita saber (también asegúrese de estar ejecutando la versión 2.4.0+).