如何解决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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。