Estoy usando la biblioteca de forma redux y obtengo este error: Error no capturado: debe pasar handleSubmit () una función onSubmit o pasar onSubmit como accesorio

La forma:

TariffForm.js

import React from "react";
       import { Field, reduxForm } from "redux-form";
       import { required } from "../../../../../../utils/validators/validators.js";
       import Input from "../../../../../Common/FormControls/FormsControls";

       let TariffForm = props => {

         const cancelSubmit = (event) => {
           event.preventDefault();
           props.cancelCreate();
         };

         debugger;
         return (
               <form onSubmit={props.handleSubmit}>
                 <div>
                   <Field
                       name={"tariffName"}
                       component={Input}
                       label={"tariffName"}
                   />
                 </div>
                 <div>
                   <Field
                       label="tariffSpeed"
                       name={"tariffSpeed"}
                       component={Input}
                   />
                 </div>
                 <div>
                   <Field
                       label="tariffPrice"
                       name={"tariffPrice"}
                       component={Input}
                   />
                 </div>
                 <div>
                   <button>Добавить</button>
                   <button  onClick={cancelSubmit} type="submit">Отменить</button>
                 </div>
               </form>
         );
       };

       TariffForm = reduxForm({
         // a unique name for the form
         form: "tariff"
       })(TariffForm);


       export default TariffForm;

Y el componente principal donde renderizo TariffForm:

AllTariffs.js

https://imgur.com/PCwOYUE

0
Vadim Sheremetov 31 oct. 2019 a las 11:40

3 respuestas

La mejor respuesta

Esto puede ayudarte

import React from "react";
import { Field, reduxForm } from "redux-form";
import { required } from "../../../../../../utils/validators/validators.js";
import Input from "../../../../../Common/FormControls/FormsControls";

   let TariffForm = props => {

     const cancelSubmit = (event) => {
       event.preventDefault();
       props.cancelCreate();
     };

     debugger;
     return (
           <form onSubmit={props.handleSubmit}>
             <div>
               <Field
                   name={"tariffName"}
                   component={Input}
                   label={"tariffName"}
               />
             </div>
             <div>
               <Field
                   label="tariffSpeed"
                   name={"tariffSpeed"}
                   component={Input}
               />
             </div>
             <div>
               <Field
                   label="tariffPrice"
                   name={"tariffPrice"}
                   component={Input}
               />
             </div>
             <div>
               <button>Добавить</button>
               <button  onClick={cancelSubmit} type="submit">Отменить</button>
             </div>
           </form>
     );
   };

   const onSubmit = (values, dispatch) => {
       dispatch(    // your submit action //      );
    };


   TariffForm = reduxForm({
     // a unique name for the form
     form: "tariff",
     onSubmit
   })(TariffForm);


   export default TariffForm;

La variable values contendrá los datos de los campos.

0
Atin Singh 31 oct. 2019 a las 09:12

Cambio

<form onSubmit={props.handleSubmit}>

Para

<form onSubmit={props.handleSubmit()}>
0
Dino 31 oct. 2019 a las 11:03

Cambio en padre: <TariffForm onSubmit={submit} cancelCreate={onCreate} />

Cambio en el niño: <form onSubmit={props.handleSubmit(props.onSubmit)}>

0
Kamil Wronka 31 oct. 2019 a las 08:47
58639509