ReactJS et Redux - Envoyer un formulaire à partir de plusieurs événements (pas de boutons)

Question

À résumons: comment puis-je soumettre un formulaire React JS Redux sans un bouton d'envoi (IE de componentDidUpdate, ou une fonction personnalisée)?

---

J'ai une interface (construite dans React JS) où un utilisateur doit « marquer » plusieurs éléments, dos à dos. IE, ils auront le 'item 1', et lui attribueront 1, 2 ou 3 étoiles, puis cliqueront sur 'next', ce qui les portera à 'item 2', qu'ils donneront ensuite 1, 2 ou 3 étoiles. .. et ainsi de suite, jusqu'à ce qu'ils aient atteint la fin. Il ya aussi un menu de navigation qui leur permet de «sauter» à n'importe quel article qu'ils veulent, s'ils le désirent. En raison de la nature, ah, des utilisateurs avec lesquels nous traitons, l'interface a été conçue avec l'idée que «marquer» un élément individuel enregistrerait immédiatement le score de cet élément (un appel POST à une API à distance). De cette façon, s'ils sortent et reviennent, leurs progrès sont toujours là. Je gère les fonctionnalités API via Redux Sagas, et ce composant particulier est un formulaire Redux.

Le formulaire Redux est un composant, puis les éléments individuels dans le formulaire sont leurs propres composants. IE:

ItemsComponent // <-- this is the connected Redux form 
    ItemComponent // <-- this contains the individual item, the stars for scoring, etc. 

La question que je rencontre est qu'il est incroyablement difficile apparemment de soumettre un formulaire Redux « sur demande ». I besoin pour soumettre ce formulaire par programme, pas via un bouton de soumission, mais Redux et/ou React semblent me murir de toutes les façons j'essaie de le faire.

Le plus proche que je suis venu est le passage d'un clickHandler au ItemComponent, qui effectue une autre fonctionnalité, puis appelle handleSubmit(this.submit) - cependant, alors que ce n'est pas moi de renvoyer une erreur , il semble tout simplement pas le déclenchement.

En bref, comment puis-je déclencher une forme Redux soumettre sans à l'aide d'un bouton d'envoi? Idéalement, à partir d'un clickHandler de quelque sorte?

---

Mes éléments composant:

class ItemsComponent extends Component { 
    ... 
} 

const formed = reduxForm({ 
    form: 'itemsform', 
})(ItemsComponent) 

const mapStateToProps = state => { 
    return { 
     items: state.getItemsReducer, // <-- Redux Saga Reducer 
    } 
} 

const connected = connect(
    mapStateToProps, { 
     getItemsRequest, // <-- Redux Saga Action 
    } 
)(formed) 

Mon magasin est attaché par le routeur:

const store = createStore( 
    IndexReducer, // <-- combined Redux reducers 
    composeSetup(applyMiddleware(sagaMiddleware)) 
) 

... 

ReactDOM.render(
    <Provider store={ store }> 
     <Router history={ browserHistory }> 
      ... 
     </Router> 
    </Provider>, 
    document.getElementById('root'), 
) 

Answer 1

Après the official documentation au sujet de soumettre le formulaire en envoyant une action que nous avons les éléments suivants:

RemoteSubmitButton.js

import React from 'react' 
import { connect } from 'react-redux' 
import { submit } from 'redux-form' 

const style = { 
    padding: '10px 20px', 
    width: 140, 
    display: 'block', 
    margin: '20px auto', 
    fontSize: '16px' 
} 

const RemoteSubmitButton = ({ dispatch }) => 
    <button 
    type="button" 
    style={style} 
    onClick={() => dispatch(submit('remoteSubmit'))}>Submit</button> 
//         ^^^^^^^^^^^^ name of the form 

export default connect()(RemoteSubmitButton) 

Dans votre cas, vous extrayez dispatch(submit('remoteSubmit')) dans vos actions et appeler cette action dans un composant connecté de componentDidUpdate