Mobxフォームに反応 - 私はmobx反応し-から使用していますし、私は私がobSubmitフック内部の私の店で持っているアクションを使用する方法を理解するためにAAの問題を持っているどのようにカスタムをonSubmitに

Question

を実装する....

mobxフォームがOK働いている..私は、入力と検証 を見ることができると私はフォームを送信するときに私が望むすべては、ストアからアクションを使用することです...

私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クラスは両方が小道具としてストアオブジェクトを注入し、上のリスナーを登録し、より高次のコンポーネントでそれをラップしますmobx-reactパッケージの両方observerとinjectメソッドを利用する必要があります。コンポーネントを再レンダリングする変更を格納します。私は通常、注釈の構文を使用し、これはこのように見えます。

@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メソッドを引数として取り込み、mobx-react-formオブジェクトを返すメソッドをエクスポートします。また、フォーム全体ではなく、電子メールとパスワードを単に引数として使用するようにストアアクションを変更します。その後、あなたにあなたが同じようにフォームをレンダリングするためにthis.formクラス変数を使用FormComponent方法をレンダリング... this.store = this.props.store割り当てた後、コンストラクタで、その後

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

を

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

：FormComponentでこれを試しますmobx-react-formドキュメント

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 
} 

うまくいけば、これはあなたの方法であなたを支援します。

できるだけ明確にするため、AuthForm.formWithSuccessAction方法は次のようになります。