Question

当用户点击来自vazco/uniforms组件的AutoForm中的提交按钮时，我试图调用一个函数。我还使用参数schema = {schema}来验证表单数据是否正确。如果表单不正确，我会发现触发该功能的方法会发生什么。如何在AutoForm上设置它？

细节：我需要在用户点击表单的按钮提交时。

我有：

<AutoForm
   showInlineError
   schema={schema}
   model={model}
   label={false}
   onSubmit={this.submitForm.bind(this)}
>
...
</AutoForm>

我知道我可以写：

onValidate={(modelTmp, error, callback) => {..}}

以及

modelTransform={(mode, model) => {..}}

但是通过这些功能，我不知道用户是否只是点击了提交按钮，或者他是否在表单上键入内容并且正在更改模型。

知道怎么解决吗？

Answer 1

我和vazco /制服的创造者RadosławMiernik谈过，他说有两种方法可以解决它：

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);

如何在尝试使用vazco /制服提交表单时触发功能？

1 个答案: