如何在 onsubmit 函数中导航到新页面答案

【问题标题】：how to navigate to a new page in an onsubmit function react native如何在 onsubmit 函数中导航到新页面
【发布时间】：2020-12-10 23:34:19
【问题描述】：

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

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 函数中导航到新屏幕

【问题讨论】：

请在此处添加更多组件代码，因为它不足以获取根本原因。我的猜测是你需要将函数绑定到类实例或使用 babel 插件来做到这一点。
我添加了整个表单。这有帮助吗？
我觉得这里不需要this关键字。你可以试试props.navigation.navigate，因为看起来你正在从其他不同地方的道具访问值。你是在使用钩子还是类组件？
我正在使用钩子。我相信这些道具是特定于 formik 表单的，而导航道具则不是。不过我会试试的
成功了，谢谢！

标签： reactjs react-native react-navigation-stack

【解决方案1】：

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

我取出了“this”，直接调用了props.navigation.navigate

【讨论】：