首页 > 解决方案 > 如何在 onsubmit 函数中导航到新页面

问题描述

我有一个表单应该存储数据并在导航到新屏幕时将其作为参数传递。我的结构是这样的。形式:

return (
    <View style={styles.container}>
      <Formik
        initialValues={{
          first_name: '',
          last_name: '',
        }}
        // Form submission action
        onSubmit={(values) => {
          const d = addData(values);
          this.props.navigation.navigate('Cart', {
            screen: 'Process Payment',
            params: {data: d},
          });
        }}>
        {(props) => (
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : null}
            style={{flex: 1, width: '100%'}}>
            <ScrollView style={styles.inner}>
              <TextInput
                style={styles.input}
                placeholder="first name"
                onChangeText={props.handleChange('first_name')}
                value={props.values.first_name}
              />
              <TextInput
                style={styles.input}
                placeholder="last name"
                onChangeText={props.handleChange('last_name')}
                value={props.values.last_name}
              />
              <View style={[{width: '90%', margin: 10, alignSelf: 'center'}]}>
                <Button
                  title="place order"
                  color="maroon"
                  onPress={props.handleSubmit}
                  style={{padding: 3, width: '80%'}}
                />
              </View>
            </ScrollView>
          </KeyboardAvoidingView>
        )}
      </Formik>
    </View>
  );
}

提交功能:

        onSubmit={(values) => {
          const d = addData(values);
          this.props.navigation.navigate('Cart', {
            screen: 'Process Payment',
            params: {data: d},
          });
        }}>

我的错误: Warning: An unhandled error was caught from submitForm() [TypeError: undefined is not an object (evaluating '_this.props.navigation')] 我不确定如何在 onsubmit 函数中导航到新屏幕

标签: reactjsreact-nativereact-navigation-stack

解决方案


        onSubmit={(values) => {
          const d = addData(values);
          props.navigation.navigate('Cart', {
            screen: 'Process Payment',
            params: {data: d},
          });
        }}>

我拿出了“这个”,只是调用了 props.navigation.navigate


推荐阅读