2017-02-21 47 views
2

我正在構建一個反應原生應用程序,並使用Redux表單作爲我的註冊表單。我目前有一個表格,併成功,但我只想成功導航到下一頁。在我的代碼中,我使用了redux-form的onSubmitSuccess函數,我需要使用道具導航到下一頁,但是當我嘗試在onSubmitSuccess中使用道具時,它告訴我「道具沒有定義」。在redux-form v6.5.0中,您可以將道具傳遞給onSubmitSuccess,但我不確定如何執行此操作。這是對應的文檔:https://github.com/erikras/redux-form/blob/master/docs/api/ReduxForm.md#onsubmitsuccess--function-optional如何將道具傳遞給Redux表單中的onSubmitSuccess回調?

下面是我的代碼片段:

render() { 
     const {handleSubmit, touched, error} = this.props 

     const onSubmit = (values, dispatch) => { 
     this.props.addFirstName(values.firstName) 
     this.props.addLastName(values.lastName) 
     this.props.addEmailAddress(values.emailAddress) 
     this.props.addPassword(values.password) 
     } 

     return (
      <Container> 
        <View theme={theme}> 
         <Image source={require('../../../images/BG-signUp.png')} style={styles.background} > 
          <Content padder scrollEnabled={false}> 
           <Text style={styles.signupHeader}> 
            CREATE ACCOUNT 
           </Text> 
           <View style={styles.signupContainer}> 
           <Field name = "firstName" component = {renderFirstName} /> 
           <Field name = "lastName" component = {renderLastName} /> 
           <Field name = "emailAddress" component = {renderEmailAddress} /> 
           <Field name = "password" component = {renderPassword} /> 
           <Field name = "confirmPassword" component = {renderConfirmPassword} /> 
           <Button 
            rounded transparent block 
            onPress={handleSubmit(onSubmit)} 
            style={styles.signupBtn} 
           > 
            Continue 
           </Button> 

           <TouchableOpacity> 
            <Text style={styles.termsText}>Terms & Conditions</Text> 
           </TouchableOpacity> 
           </View> 
          </Content> 
         </Image> 
        </View> 
      </Container> 
    ) 
    } 

function bindAction(dispatch) { 
    return { 
     addFirstName: (firstName) => dispatch(addFirstName(firstName)), 
     addLastName: (lastName) => dispatch(addLastName(lastName)), 
     addEmailAddress: (emailAddress) => dispatch(addEmailAddress(emailAddress)), 
     addPassword: (password) => dispatch(addPassword(password)), 
     reset: key => dispatch(reset([{ key: 'orgPage' }], key, 0)), 
    }; 
} 

const mapStateToProps = state => ({ 
    navigation: state.cardNavigation, 
    credentials: state.credentials 
}); 

/*export default connect(mapStateToProps, bindAction)(SignUp);*/ 
SignUp = reduxForm({ 
    form: 'signup', 
    validate, 
    onSubmitSuccess:() => { 
    this.props.reset(this.props.navigation.key) 
    } 
})(SignUp); 

SignUp = connect(mapStateToProps, bindAction)(SignUp); 

回答

3
SignUp = reduxForm({ 
    form: 'signup', 
    validate, 
    onSubmitSuccess:() => { 
    this.props.reset(this.props.navigation.key) 
    } 
})(SignUp); 

this有這個胖箭頭函數中沒有任何意義。作爲第三個參數,道具被賦予onSubmitSuccess

SignUp = reduxForm({ 
    form: 'signup', 
    validate, 
    onSubmitSuccess: (result, dispatch, props) => { 
    props.reset(props.navigation.key) // <--------- 
    } 
})(SignUp); 

希望有幫助。

+0

謝謝你的工作!沒有錯誤,現在屏幕沒有導航到下一頁,但我想我的代碼有其他問題 – kjwade3

+0

僅供參考,您的'bindAction'函數被內置到'react-redux'中。你可以這樣說: 'SignUp = connect(mapStateToProps,{addFirstName,addLastName,addEmailAddress,addPassword})',它會自動綁定他們,就像你目前手動做的一樣。 –

相關問題