Redux 表单 - 在没有按钮但在字段更改时提交
Redux forms - submit when no buttons but on field changes
我正在创建一个带有 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)
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
/>
我把它变成了一个组件,并添加了一个从 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)
我正在创建一个带有 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)
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
/>
我把它变成了一个组件,并添加了一个从 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)