Forms Mobx React表单-如何实现自定义onSubmit_Forms_Reactjs_Mobx_Mobx React

Forms Mobx React表单-如何实现自定义onSubmit

forms reactjs

Forms Mobx React表单-如何实现自定义onSubmit,forms,reactjs,mobx,mobx-react,Forms,Reactjs,Mobx,Mobx React,我正在使用mobx react from，我有一个问题想知道如何使用我在obSubmit hook内的商店中的操作 mobx表单工作正常。。我可以看到输入和验证当我提交表单时，我只想使用store中的操作我的自动存储文件： import {observable,action} from 'mobx'; class AuthStore { constructor(store) { this.store = store } @action authLogin=(f

我正在使用mobx react from，我有一个问题想知道如何使用我在obSubmit hook内的商店中的操作

mobx表单工作正常。。我可以看到输入和验证当我提交表单时，我只想使用store中的操作

我的自动存储文件：

import {observable,action} from 'mobx';

class AuthStore {

  constructor(store) {
      this.store = store
   }

  @action authLogin=(form)=>{

    this.store.firebaseAuth.signInWithEmailAndPassword().then(()=>{

    }).catch(()=>{

    })
  }

 }

 export default AuthStore

我的AuthForm文件：

 import {observable, action} from 'mobx';
 import MobxReactForm from 'mobx-react-form';
 import {formFields,formValidation} from './formSettings';

 const fields = [
   formFields.email,
   formFields.password
 ];
 const hooks = {

  onSuccess(form) {
     // Here i want to use an action  - authLogin from my AuthStore
     console.log('Form Values!', form.values());
  },
  onError(form) {
    console.log('All form errors', form.errors());
   }
 };

const AuthForm = new MobxReactForm({fields}, {plugins:formValidation, 
hooks});
export default AuthForm

我想知道我怎样才能把所有的联系在一起谢谢

我以前没有使用过

mobx-react表单

，但已经广泛使用了

mobx

和

react

。有几种方法可以做到这一点。我这样做的方式如下，假设这里有Webpack&ES6&React 14。实例化存储，并在承载表单的组件周围使用

提供程序

import { Provider } from 'mobx-react'
import React, { Component, PropTypes } from 'react'
import AuthStore from '{your auth store rel path}'
import FormComponent from '{your form component rel path}'
// instantiate store
const myAuthStore = new AuthStore()
// i don't think the constructor for AuthStore needs a store arg.
export default class SingleFormApplication extends Component {
    render() {
      return (
        <Provider store={myAuthStore} >
          <FormComponent />
        </Provider>
      )
    }
}

最后，通过注入存储，您现在可以将一个操作从存储传递到

AuthForm

方法中，我建议您相应地修改该方法。让

AuthForm

文件导出一个方法，该方法将

onSuccess

方法作为参数，并返回

mobx react form

对象。我还将修改您的商店操作，将电子邮件和密码作为arg而不是整个表单。在

表单组件中

尝试以下操作：

import { formWithSuccessAction } from '{rel path to auth form}'

然后在

this.store=this.props.store

assignment之后的构造函数中

this.form = formWithSuccessAction(this.store.authLogin)

然后在

FormComponent

的呈现方法中，使用

this.form

类变量呈现表单，就像在

mobx react form

文档中一样

为了尽可能清楚，AuthForm.formWithSuccessAction方法应该如下所示：

const formWithSuccessAction = (storeSuccessAction) => {
 const fields = [
   formFields.email,
   formFields.password
 ];
 const hooks = {

  onSuccess(form) {
     // Here i want to use an action  - authLogin from my AuthStore
     console.log('Form Values!', form.values());
     // get email and password in separate vars or not, up to you
     storeSuccessAction(email, password)
  },
  onError(form) {
    console.log('All form errors', form.errors());
   }
 };

  const AuthForm = new MobxReactForm({fields}, {plugins:formValidation, 
hooks});

  return AuthForm
}

希望这对您有所帮助。