reactjs - que - redux form react native

Formulario Redux: ¿Cómo manejar múltiples botones?

Question

Estoy tratando de agregar un segundo botón de envío a un redux-form .

Ambos botones deben enviar una acción que guarde los datos, pero dependiendo del botón presionado, el usuario debe ser dirigido a diferentes páginas.

Así que onSubmit un manejador que paso como onSubmit prop al formulario.

Pero hasta donde puedo ver, solo los datos del formulario se pasan a este controlador:

La documentación en la nota de handleSubmit :

Una función que debe pasarse a <form onSubmit={handleSubmit}> o a <button onClick={handleSubmit}> . Ejecutará la validación, tanto la sincronización como la asíncrona, y, si el formulario es válido, llamará this.props.onSubmit(data) con el contenido de los datos del formulario.

Lo que me falta es una forma de pasar también la información sobre el botón presionado (por ejemplo, el evento de clic) a mi controlador onSubmit, para que pueda guardar y enrutar según lo previsto.

Answer 1

@mibbit onSubmit es una función que usted define (al menos esto es lo que dice el documento: busque el método onSubmit ). Esto es para redux-form 7.x siguiendo el ejemplo de @Erik R.

    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)

Answer 2

Hay muchas maneras de hacer esto, pero todas involucran agregar los datos de los botones dependiendo de qué botón se presionó. Aquí hay una versión en línea.

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)

El handleSubmit maneja todas las comprobaciones de validación y todo lo demás, y si todo es válido, llamará a la función que se le asigna con los valores del formulario. Por lo tanto, le onSubmit() una función que agrega información adicional y llama onSubmit() .