如何在尝试使用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，或者如果他在表格上键入内容并且正在改变模型。

任何想法如何解决它？

来源

2017-03-07 Flavio H. Freitas

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

来源

2017-03-08 20:07:10

如何在尝试使用vazco/uniforms提交表单时触发某个功能？

回答

相关问题