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＆amp; ES6＆amp;在这里反应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课程需要利用observer包的inject和mobx-react方法，这些方法会将其包装在更高顺序的组件中将商店对象作为prop，并在商店中注册一个监听器，以获取将重新呈现组件的更改。我通常使用注释语法，它看起来像这样。

@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并返回mobx-react-form对象。我还会修改您的商店操作，只需将电子邮件和密码作为arg而不是整个表单。在FormComponent试试这个：

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

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

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
}

希望这能帮到你。

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

1 个答案: