如何在尝试使用vazco/uniforms提交表单时触发某个功能?
问题描述:
我想在用户从vazco/uniforms组件中单击AutoForm内的提交按钮时调用一个函数。我还使用参数schema = {schema}来验证表单数据是否正确。如果表单不正确,会发生什么情况,我没有找到触发该功能的方法。我怎样才能在AutoForm上设置它?如何在尝试使用vazco/uniforms提交表单时触发某个功能?
细节:我需要当用户点击表单的按钮提交。
我:
<AutoForm
showInlineError
schema={schema}
model={model}
label={false}
onSubmit={this.submitForm.bind(this)}
>
...
</AutoForm>
我知道我可以写:
onValidate={(modelTmp, error, callback) => {..}}
也
modelTransform={(mode, model) => {..}}
但这个功能我不知道用户只需点击提交b utton,或者如果他在表格上键入内容并且正在改变模型。
任何想法如何解决它?
答
我跟vazco /制服,拉多斯拉夫·Miernik的创造者,他说,有解决它的方法有两种:
1)添加的形式,当它被点击了一个按钮,触发功能。
2)创建一个自定义表单。
由于我正在寻找一个解决方案只使用AutoForm,我注意到这是不可能的。然后,我的解决方案是创建一个我需要的自定义表单。所以解决方案是自定义表格(基于AutoForm):
import cloneDeep from 'lodash.clonedeep';
import isEqual from 'lodash.isequal';
import set from 'lodash.set';
import {PropTypes} from 'react';
import ValidatedQuickForm from 'uniforms-bootstrap3/ValidatedQuickForm';
const Auto = parent => class Custom extends parent {
static Auto = Auto;
static displayName = `Auto${parent.displayName}`;
static propTypes = {
...parent.propTypes,
onChangeModel: PropTypes.func
};
constructor() {
super(...arguments);// eslint-disable-line
this.state = {
...this.state,
model: this.props.model,
modelSync: this.props.model
};
}
componentWillReceiveProps({model}) {
super.componentWillReceiveProps(...arguments);// eslint-disable-line
if (!isEqual(this.props.model, model)) {
this.setState({model, modelSync: model});
}
}
func() {
// makes whatever i need
}
getNativeFormProps() {
const {
onChangeModel, // eslint-disable-line no-unused-vars
...props
} = super.getNativeFormProps();
return props;
}
getModel(mode) {
return mode === 'form' ? this.state.modelSync : this.state.model;
}
onChange(key, value) {
this.setState(state => ({modelSync: set(cloneDeep(state.modelSync), key, value)}),() => {
super.onChange(...arguments);// eslint-disable-line
this.setState({model: this.state.modelSync},() => {
if (this.props.onChangeModel) {
this.props.onChangeModel(this.state.model);
}
});
});
}
onReset() {
this.setState(() => {
super.onReset();
return {
model: this.props.model,
modelSync: this.props.model
};
});
}
onSubmit(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
this.func(); // func that i wanted to call
return new Promise(resolve =>
this.setState({validate: true},() =>
resolve(this.onValidate().then(
() => super.onSubmit()))
)
);
}
onValidate() {
return this.onValidateModel(this.getChildContextModel());
}
};
export default Auto(ValidatedQuickForm);