单击保存详细信息时出现致命错误：您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 prop(...)

Question

我想点击保存详细信息而不是收到此错误：

您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 prop(…)

这是我的代码：

      render(){

const{detailItem,index,fields,handleSubmit,isSubtotal,loading} = this.props;


if (loading) {
  return <span>Loading...</span>;
}

return(


  <dd key={index}>
  <br></br>
    <button className= 'btn btn-light mr-2'
      type="button"
      title="Remove detail"
      onClick={() => { fields.remove(index)
        if(fields.length == 0 || fields.length === undefined){

        }
        try{
        for(let x in fields){
          fields.remove(index) 
          let d = fields.selectedIndex;
          if(fields.remove(index) && d >= 1 && d< fields.length ){
          fields.removeAll(index);
          }
        }
      }catch{console.info("deletes non numerical index")}

        }}> Delete </button>

            <h4>DetailRegister #{index + 1}</h4>

                  <form onSubmit={ handleSubmit }>

                  <Field 
                   id={`${detailItem}._id`}
                   name={`${detailItem}.quantity`}
                   component= {NumberPickerInteger}
                   placeholder= '...quantity'
                   label = "Quantity" 
                      />
                    <br></br>
                 <h3><b>Product</b></h3>
                   <Field 
                    id={`${detailItem}._id`}
                    name={`${detailItem}.product.code`}
                    type="number"
                    component= {RenderFieldNumeric}
                    placeholder='...product code'
                    label = "product's code" 
                    />
                    <Field 
                     id={`${detailItem}._id`}
                     name={`${detailItem}.product.name`}
                     type="text"
                     component= {RenderField}
                     placeholder='...product's name'
                     label = "product's name" 
                      />
                    <Field 
                      id={`${detailItem}._id`}
                      name={`${detailItem}.product.price`}
                      component= {NumberPickerr}
                      placeholder= '...Price'
                      label = "product's price" 
                      />
                    <br></br>
                     <h3><b>Subtotal</b></h3>
                      <Field 
                       id={`${detailItem}._id`}
                       name={`${detailItem}.subtotal`}
                       component= {SubtotalWidget}
                       placeholder= '...subtotal'
                       label = "Subtotal" 
                       // value={this.state.subtotal}
                       // onChange={(event) => this.props.onChange(event.target.value)}
                          >
                         {haySubtotal}
                         </Field>

                          <button className= 'btn btn-primary' type='submit'>

                           Save Detail  </button>

                           </form>

                            </dd>
                          );

                        }

                       }

如何在代码中解决这个问题？，我想单击一个名为“保存详细信息”的按钮。当我点击这个时，这会将对象保存在 redux 的存储中。

Answer 1

假设您的组件代码位于名为 DetailForm 的组件中。首先，您需要确保您是这样退货的：

export default reduxForm({
  form: 'detailForm',
  })(DetailForm);

在你使用表单的地方，你应该像下面这样传递 onSubmit 属性：

  <DetailForm onSubmit={functionWhichHandlesValues} />

请注意，您不应传递 handleSubmit 属性，而应传递 onSubmit 属性。

单击保存详细信息时出现致命错误：您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 prop(...)

Fatal Error when clicking on save detail: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop(…)

javascript

reactjs

redux-form