Redux forms - submit when no buttons but on field changes

Question

I am creating a redux-form shell with material ui inputs -- I am trying to create a genericForm handler that will allow a field and button object that could be pumped into the component -- I need now to create a form with no submit button due to design - but is able to submit the form on field changes if there are no buttons.

I have a handleChange function that will listen to onChange events for all field types - and bring back the fieldname and new value -- and it now has scope to know if the form hasButtons --- but I am unsure where and how to develop this further to submit the data to the parent if a field is changed

https://redux-form.com/6.0.0-alpha.7/examples/asyncvalidation/

FormShell.js

import React from 'react';
import { reduxForm } from 'redux-form';

import FieldMaker from './FieldMaker';
import ButtonMaker from './ButtonMaker';

const FormShell = props => {
  const { handleSubmit, pristine, reset, previousPage, submitting } = props

  return (
    <form onSubmit={handleSubmit}>
      <FieldMaker fields={props.fields} hasButtons={props.buttons.length > 0? true: false} />
      <ButtonMaker buttons={props.buttons} pristine={pristine} submitting={submitting} reset={reset} previousPage={previousPage} />
    </form>
  )
}

export default reduxForm()(FormShell)

GenericForm.js

      <FormShell 
        initialValues={this.props.initialValues} 
        enableReinitialize={true}//allow form to be reinitialized
        fields={this.props.fields} 
        buttons={this.props.buttons}
        form={this.state.uuid}// a unique identifier for this form
        validate={this.validateHandler}// <--- validation function given to redux-form
        warn={this.warnHandler}//<--- warning function given to redux-form
        onSubmit={this.submit}
        previousPage={this.props.previousPage}
        destroyOnUnmount={this.props.destroyOnUnmount}// <------ preserve form data
        forceUnregisterOnUnmount={this.props.forceUnregisterOnUnmount}// <------ unregister fields on unmount 
      />

Answer 1

I turned this into a component and added a function that got the field changes from the FieldMaker component

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';

import FieldMaker from './FieldMaker';
import ButtonMaker from './ButtonMaker';

class FormShell extends Component {
 
 constructor(props, context) {
    super(props, context);
    this.fieldChanged = this.fieldChanged.bind(this);
 }

  fieldChanged(field, value){
      console.log("Fields have changed", field, value);

      //if it doesn't have any submit buttons -- then submit the form on change of fields
      if(!this.props.buttons.length > 0){
        console.log("submit the form as a buttonless form");

        setTimeout(() => {
          this.props.handleSubmit();
        }, 1);        
      }
  }

 render(){
  const { handleSubmit, pristine, reset, previousPage, submitting } = this.props

  console.log("THIS FORM SHELL PROPS", this.props);
  return (
    <form onSubmit={handleSubmit}>
      <FieldMaker fields={this.props.fields} fieldChanged={this.fieldChanged} />
      <ButtonMaker buttons={this.props.buttons} pristine={pristine} submitting={submitting} reset={reset} previousPage={previousPage} />
    </form>
  )
 }


}




export default reduxForm()(FormShell)