Неустранимая ошибка при нажатии на детали сохранения: вы должны либо передать handleSubmit () функцию onSubmit, либо передать onSubmit в качестве пропеллера (…)

Question

Я хочу нажать на детали сохранения и не получить эту ошибку:

Вы должны либо передать handleSubmit () функцию onSubmit, либо передать onSubmit в качестве реквизита (…)

Это мое code:

      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>
                          );

                        }

                       }

Как я могу решить эту проблему в коде? Я хочу нажать на кнопку под названием Save detail. Когда я нажму на этот, это сохранит объект в магазине излишков.

Answer 1

Предположим, ваш код компонента находится внутри компонента с именем DetailForm. Во-первых, вы должны убедиться, что вы возвращаете его так:

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

и где вы используете форму, которую вы должны передать onSubmit реквизит, как показано ниже:

  <DetailForm onSubmit={functionWhichHandlesValues} />

Обратите внимание что вы не должны передавать handleSubmit реквизит, вы должны вместо этого передать onSubmit реквизит.