web-dev-qa-db-fra.com

Redux Form: Comment gérer plusieurs boutons?

J'essaye d'ajouter un deuxième bouton de soumission à un redux-form .

Les deux boutons doivent déclencher une action qui enregistre les données, mais en fonction du bouton enfoncé, l'utilisateur doit être dirigé vers des pages différentes.

J'ai donc défini un gestionnaire que je transmets comme étant un accessoire onSubmit au formulaire.

Mais autant que je sache, seul le formulaire data est transmis à ce gestionnaire:

Les docs sur handleSubmit note:

Une fonction destinée à être passée à <form onSubmit={handleSubmit}> ou à <button onClick={handleSubmit}>. Il exécutera la validation, à la fois synchrone et asynchrone, et, si le formulaire est valide, il appellera this.props.onSubmit(data) avec le contenu des données du formulaire.

Ce qui me manque, c’est un moyen de transmettre également les informations relatives au bouton enfoncé (par exemple, l’événement click) à mon gestionnaire onSubmit, afin que je puisse enregistrer et acheminer comme prévu.

reactjsreduxredux-form
16
arie

Il existe plusieurs façons de procéder, mais elles impliquent toutes l’ajout des données du bouton en fonction du bouton sur lequel vous avez appuyé. Voici une version en ligne.

class Morpheus extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        Fields go here
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'blue'
          }))}>Blue Pill</button>
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'red'
          }))}>Red Pill</button>
      </div>
    );
  }
}

export default reduxForm({
  form: 'morpheus'
})(Morpheus)

La handleSubmit gère toutes les vérifications de validation et autres, et si tout est valide, elle appellera la fonction qui lui est donnée avec les valeurs de formulaire. Nous lui donnons donc une fonction qui ajoute des informations supplémentaires et appelle onSubmit().

34
Erik R.

@mibbit onSubmit est une fonction que vous définissez (du moins c'est ce que dit la doc: regardez la méthode onSubmit ). Ceci est pour l'exemple suivant de @Erik R. de redux-form 7.x.

    class Morpheus extends Component {
    constructor(props) {
        super(props);

        this.state = {};
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(values, pill) {
        // do magic here
    }

    render() {
        const {
            handleSubmit
        } = this.props;
        return ( <
            div >
            Fields go here <
            button onClick = {
                handleSubmit(values =>
                    this.onSubmit({
                        values,
                        pill: 'blue'
                    }))
            } > Blue Pill < /button> <
            button onClick = {
                handleSubmit(values =>
                    this.onSubmit({
                        values,
                        pill: 'red'
                    }))
            } > Red Pill < /button> <
            /div>
        );
    }
}

export default reduxForm({
    form: 'morpheus'
})(Morpheus)
1
maxi-code