Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Question

我正在使用 redux-form 库并收到此错误：未捕获的错误：您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递

表格：

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

parent 的变化：<TariffForm onSubmit={submit} cancelCreate={onCreate} />

child 的变化：<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 变量将保存字段数据。

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

javascript

reactjs

react-redux

redux-form

react-props