폼 반응 Mobx - .... 사용자가 내가 obSubmit 후크 안에 내 상점에서이 작업을 사용하는 방법을 파악하는

Question

내가 mobx이-반응-에서 사용하고 그리고 난 AA 문제가 onSubmit 구현하는 방법

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 클래스는 모두 소품으로 저장소 개체를 주입하고에 리스너를 등록하는 고차 구성 요소에 포장됩니다 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 메서드를 arg로 사용하는 메서드를 내보내고 mobx-react-form 개체를 반환합니다. 또한 저장소 작업을 수정하여 전자 메일과 암호를 전체 양식 대신 arg로 사용하기 만하면됩니다. FormComponent에서 이것을 시도 : 당신은에서와 같이

FormComponent 당신의 렌더링 방법 다음

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

양식을 렌더링 할 this.form 클래스 변수를 사용

다음

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

생성자에 ... 할당 this.store = this.props.store 후 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 
} 

는 희망이 당신의 방법에 당신을 도와줍니다.