javascript - example - redux form react native

Botón de enviar desde fuera de Redux Form v6.0.0

Question

Esta pregunta se relaciona con Redux Form v6.0.0 (en el momento de escribir esta pregunta es v6.0.0-alpha.15).

¿Cómo puedo obtener el estado de validación del formulario (como pristine , submitting , invalid ) desde fuera del componente del formulario?

Déjame dar un ejemplo. Esta es la pseudoestructura de "forma redux clásica":

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

... donde <submit-button> en JSX se ve así:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

Pero en mi solicitud, mi botón de envío debe estar fuera del formulario, ubicado en un lugar diferente de la aplicación (digamos en el encabezado de la aplicación, en la parte superior de toda la aplicación).

1. ¿Cómo puedo obtener esos formularios pristine , invalid desde fuera de Redux-Form? ( Sin piratería realmente desagradable, si es posible :-) )
2. ¿Cómo puedo enviar ese formulario?

Answer 1

redux-form trabaja con React Redux para habilitar un formulario html en React para usar Redux para almacenar todo su estado.

Si "fuera de Redux-Form" significa una aplicación que aún está en proceso de redux, puede intentar almacenar esas propiedades en estado enviando algunas acciones.

En las formas: está detectando qué está sucediendo (cuando no es válido, etc.), envíe una acción para modificar un estado, En la parte "externa": está pasando una propiedad adecuada al componente (con las que necesita) y depende de eso deshabilitar un botón.

Answer 2

Ahora es más fácil hacer esto. Puede llamar a la acción Enviar en el componente independiente que tiene el botón.

Vea este ejemplo: https://redux-form.com/7.1.2/examples/remotesubmit/

Answer 3

Si estamos hablando de enviar el formulario, debe proporcionar la opción {withRef: true} a su función redux connect ().

Considere el componente Fila que tiene un componente RowDetail hijo que tiene información que debe guardarse desde Fila.

RowDetail en este caso podría crearse así:

import { connect } from ''react-redux'';
import { reduxForm } from ''redux-form'';

const RowDetailForm = reduxForm({form: ''row-detail-form''})(RowDetail);

export default connect(mapStateToProps, null, null, {withRef: true})(RowDetailForm);

Luego, en su componente principal ( Fila ) creará su formulario con el atributo ref:

<RowDetailForm ref={''rowDetailForm''} .../>  

Presentar ahora es ''fácil'':

onSave() {
  this.refs.rowDetailForm.getWrappedInstance().submit();
}

Si estamos hablando de propiedades prístinas y de otro tipo, entonces podría intentar obtenerlas de su función mapStateToProps en su componente principal .

const rowDetailFormName = ''row-detail-form'';
const mapStateToProps = (state) => ({
  rowDetailForm: state.form[rowDetailFormName]
});

Pero de esta manera parece un poco intrincado porque, según entiendo, la API de formulario redux nunca tuvo la intención de acceder directamente a todos los estados de formulario. Por favor, corríjame si estoy equivocado

Answer 4

Simplemente decore otro componente con el mismo nombre de formulario y tendrá acceso a las mismas variables de estado allí. También puede pasarla a la función de envío desde el padre y poder enviar todos los valores del campo desde donde los defina, ya que todos son del estado de redux, no HTML de la instancia del formulario actual. (Es una forma de "hacky", pero se siente bien)

La función de envío se define desde el padre, no se comparte en el estado, por lo que puede tenerla diferente para cada instancia.

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? ''pristine'' : ''changed''}
            </button>
        )
    }
}

export default reduxForm({
    form: ''myFormName''
})(MySubmitForm);

Answer 5

Tal vez puedas echar un vistazo a la API de instancia de redux-forms . Proporciona acceso a un método submit() en una instancia de su componente de formulario decorado. También hay una propiedad booleana pristine y una propiedad booleana invalid disponible (también hay una request para exponer la propiedad que envía).

Aquí hay un ejemplo: http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (el ejemplo es para 5.3.1, pero el proceso es similar con v6 usando el API de instancia)

La idea básica es que al agregar un ref="myExampleForm" a su formulario, puede pasarlo con this.refs.myExampleForm . Luego puede verificar las propiedades de la instancia o llamar al método submit() (o cualquier otro método expuesto).

Answer 6

Tuve que abordar este tema recientemente. Terminé pasando una devolución de llamada al formulario, que se invoca cada vez que cambian las propiedades que me interesan. Utilizo el método del ciclo de vida de la fecha de componentDidUpdate del componentDidUpdate para detectar cambios.

Esto debería funcionar en cualquier versión de la biblioteca.

Aquí hay una publicación con código de ejemplo: http://nikgrozev.com/2018/06/08/redux-form-with-external-submit-button/

Answer 7

en la última versión de redux 6.0.2:

1. es posible acceder al formulario de estado pristine , submitting , invalid través de selectores http://redux-form.com/6.0.2/docs/api/Selectors.md/

2. es posible exportar creadores de acción de forma redux http://redux-form.com/6.0.2/docs/api/ActionCreators.md/