Redux 表单 - 在没有按钮但在字段更改时提交

Question

我正在创建一个带有 material ui 输入的 redux-form shell——我正在尝试创建一个 genericForm 处理程序，它将允许可以将字段和按钮对象泵入组件——我现在需要创建一个没有提交按钮的表单由于设计 - 但如果没有按钮，则能够在字段更改时提交表单。

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

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)

通用表单.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

我把它变成了一个组件并添加了一个函数，该函数从 FieldMaker 组件中获取字段更改import React, { Component } from 'react';import { reduxForm } from 'redux-form';import FieldMaker from './FieldMaker';import ButtonMaker from './ButtonMaker';class FormShell extends Component {&nbsp;&nbsp;constructor(props, context) {&nbsp; &nbsp; super(props, context);&nbsp; &nbsp; this.fieldChanged = this.fieldChanged.bind(this);&nbsp;}&nbsp; fieldChanged(field, value){&nbsp; &nbsp; &nbsp; console.log("Fields have changed", field, value);&nbsp; &nbsp; &nbsp; //if it doesn't have any submit buttons -- then submit the form on change of fields&nbsp; &nbsp; &nbsp; if(!this.props.buttons.length > 0){&nbsp; &nbsp; &nbsp; &nbsp; console.log("submit the form as a buttonless form");&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.handleSubmit();&nbsp; &nbsp; &nbsp; &nbsp; }, 1);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; }&nbsp;render(){&nbsp; const { handleSubmit, pristine, reset, previousPage, submitting } = this.props&nbsp; console.log("THIS FORM SHELL PROPS", this.props);&nbsp; return (&nbsp; &nbsp; <form onSubmit={handleSubmit}>&nbsp; &nbsp; &nbsp; <FieldMaker fields={this.props.fields} fieldChanged={this.fieldChanged} />&nbsp; &nbsp; &nbsp; <ButtonMaker buttons={this.props.buttons} pristine={pristine} submitting={submitting} reset={reset} previousPage={previousPage} />&nbsp; &nbsp; </form>&nbsp; )&nbsp;}}export default reduxForm()(FormShell)