Redux表单-在没有按钮但字段更改的情况下提交

问题描述

我正在使用材料ui输入创建一个redux-form外壳-我正在尝试创建一个genericForm处理程序，该处理程序将允许将字段和按钮对象泵入组件中-现在，我需要使用由于设计原因，没有提交按钮-但是如果没有按钮，则可以根据字段更改提交表单。

我有一个handleChange函数，它将监听所有字段类型的onChange事件-并带回字段名称和新值-现在它可以确定表单是否具有hasButtons ---但我不确定在哪里以及如何进行进一步开发以在字段更改时将数据提交给父级

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

FormShell.js

var skus = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),queryTokenizer: Bloodhound.tokenizers.whitespace,//prefetch: '../data/films/post_1960.json',remote: {
    url: 'http://localhost:3000/user/search?key=%QUERY',wildcard: '%QUERY'
  }
});
$(document).ready(function(){
    $('input.typeahead').typeahead(
    {hint: true,highlight: false,minLength: 1
    },{
        name: 'sku',//remote: 'http://localhost:3000/user/search?key=%QUERY',source: skus,limit: 10
    });
});

GenericForm.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)

解决方法

我将其变成一个组件，并添加了一个功能，该功能从FieldMaker组件获取了字段更改

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)