Question

我正在使用redux-form库，并收到以下错误消息：未捕获的错误：您必须将handleSubmit（）传递给onSubmit函数，或者将onSubmit作为prop传递

表格：

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;

还有渲染TariffForm的父组件：

AllTariffs.js

https://imgur.com/PCwOYUE

Answer 1

更改

<form onSubmit={props.handleSubmit}>

到

<form onSubmit={props.handleSubmit()}>

Answer 2

更改父级：<TariffForm onSubmit={submit} cancelCreate={onCreate} />

更改子代：<form onSubmit={props.handleSubmit(props.onSubmit)}>

Answer 3

这可能对您有帮助-

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;

values变量将保存字段数据。

未捕获的错误：您必须将handleSubmit（）传递给onSubmit函数，或者将onSubmit作为prop传递

3 个答案: