Mobx React Form - 如何实现自定义 onSubmit

Question

我正在使用 mobx-react-from，但我无法弄清楚如何使用我商店中 obSubmit 挂钩中的操作....

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

我的 AutStore 文件：

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

我想知道如何将它们连接在一起谢谢!!!

Answer 1

我以前没有使用过 mobx-react-form，但广泛使用过 mobx 和 react。有几种方法可以做到这一点。我的做法如下，假设这里使用 Webpack & ES6 & React 14。实例化商店，并在承载表单的组件周围使用 Provider。

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

您的 FormComponent class 将需要利用 mobx-react 包的 observer 和 inject 方法，将其包装在一个高阶组件，它既将 store 对象作为 prop 注入，又在 store 上注册一个侦听器，以获取将重新呈现组件的更改。我通常使用注释语法，它看起来像这样。

@inject('{name of provider store prop to inject}') @observer
export default class Example extends Component {
  constructor(props) {
    super(props)
    this.store = this.props.store
  }
}

最后，注入商店后，您现在可以将商店中的操作传递给 AuthForm 方法，我建议您相应地修改该方法。让 AuthForm 文件导出一个方法，该方法将 onSuccess 方法作为 arg 和 returns mobx-react-form 对象。我还会修改您的存储操作，以简单地将电子邮件和密码作为参数而不是整个表单。在 FormComponent 中试试这个：

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

然后在 this.store = this.props.store 赋值后的构造函数中...

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

然后在 FormComponent 的呈现方法中使用 this.form class 变量来呈现表单，就像在 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
}

希望这对您有所帮助。

Mobx React Form - 如何实现自定义 onSubmit

Mobx React Form - How to implement Custom onSubmit

forms

reactjs

mobx

mobx-react