Pulsante di invio dall'esterno Redux Form v6.0.0

Question

Questa domanda si riferisce a Redux Form v6.0.0 (in fase di scrittura questa domanda è v6.0.0-alpha.15).

Come posso ottenere lo stato di convalida del modulo (come pristine, submitting, invalid) dall'esterno del componente del modulo?

Lasciatemi fare un esempio. Questo è "classico redux-forma" pseudo-struttura:

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

... dove <submit-button> in JSX assomiglia a questo:

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

Ma nella mia richiesta, il mio pulsante di presentare deve essere al di fuori del modulo, collocato in una posizione diversa nell'applicazione (diciamo nell'intestazione dell'applicazione, nella parte superiore dell'intera applicazione).

1. Come posso ottenere quelle pristine, submitting, invalid dall'esterno di Redux-Form? (Senza hacking davvero brutto, se possibile :-))
2. Come posso inviare quel modulo?

Answer 1

Ju st decoriamo un altro componente con lo stesso nome del modulo e avete accesso alle stesse variabili di stato lì. Inoltre è possibile passare la funzione onSubmit da genitore ed essere in grado di inviare tutti i valori Field da ovunque li si definisca in quanto sono tutti da stato redux, non HTML dell'istanza modulo corrente. (è un po '"hacky", ma sembra giusto)

La funzione di invio è definita da padre, non condivisa in stato, quindi puoi averla diversa per ogni istanza.

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 2

redux-form funziona con React Redux per abilitare un modulo HTML in React utilizzare Redux per memorizzare tutto il suo stato.

Se "fuori da Redux-Form" significa un'applicazione ancora ridondante, è possibile provare a memorizzare tali proprietà in stato inviando alcune azioni.

Nelle forme: si sta rilevando che cosa sta accadendo (quando è valido ecc. e dipende da ciò che disabiliti un pulsante.

Answer 3

Forse si può dare un'occhiata allo Instance API di redux-forms. Fornisce l'accesso a un metodo submit() su un'istanza del componente del modulo decorato. C'è anche una proprietà booleana pristine e una proprietà booleana invalid disponibile (c'è un request per esporre anche la proprietà di invio).

C'è un esempio qui: http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (esempio è per 5.3.1, ma il processo è simile con V6 utilizzando l'API Instance)

L'idea di base è che l'aggiunta di un ref="myExampleForm" al modulo, è possibile passalo con this.refs.myExampleForm. È quindi possibile controllare le proprietà dell'istanza o chiamare il metodo submit() (o qualsiasi altro metodo esposto).

Answer 4

Se stiamo solo inviando il modulo, è necessario fornire {withRef: true} option alla funzione redux connect().

consideri Row componente che ha bambino RowDetail componente che dispone di informazioni che dovrebbero essere salvato da Riga.

RowDetail in questo caso potrebbe essere creato in questo modo:

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

Poi, nel componente genitore (Row) si crea il modulo con l'attributo ref:

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

Sottoporre ora è 'facile':

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

Se stiamo parlando di proprietà pristine e di altre forme, puoi provare a ottenerle dalla funzione mapStateToProps nel tuo componente genitore.

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

Ma in questo modo sembra un po 'hacky perché come ho capito Redux-forma API tutti gli stati di forma non sono mai state destinate ad accedere direttamente. Si prega di correggermi se sbaglio

Answer 5

in ultima Redux-form versione 6.0.2:

1. è possibile accedere forma statale pristine, submitting, invalid tramite selettori http://redux-form.com/6.0.2/docs/api/Selectors.md/

2. è possibile esportare creatori di azioni redux http://redux-form.com/6.0.2/docs/api/ActionCreators.md/

Answer 6

Ora è più facile farlo. Puoi chiamare l'azione Submit nel componente standalone che ha il pulsante.

Vedi questo esempio: https://redux-form.com/7.1.2/examples/remotesubmit/