如何在Redux表单中将Props传递给onSubmitSuccess回调函数？

Question

如何在Redux表单中将Props传递给onSubmitSuccess回调函数？

javascriptformsreact-nativeredux-formreact-redux-form

4

我正在构建一个React Native应用程序，并使用Redux-form来处理我的注册表单。我目前有一个表单，当成功时，我想要导航到下一页，但只有在成功的情况下才能这样做。在我的代码中，我使用了redux-form的onSubmitSuccess函数，并且需要使用props来导航到下一页，但是当我尝试在onSubmitSuccess中使用props时，它告诉我"props未定义"。在redux-form v6.5.0中，您可以将props传递给onSubmitSuccess，但我不确定如何准确地执行此操作。以下是相关文档：https://github.com/erikras/redux-form/blob/master/docs/api/ReduxForm.md#onsubmitsuccess--function-optional 以下是我的代码片段：

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

- kjwade3

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik R. · Accepted Answer

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

希望这能帮到您。