在 formik 之外的本地 formik 中处理提交

Question

我想在 formik 之外使用我在 formik 中使用的 TouchableOpacity。我不知道如何在 formik 函数之外使用 handleSubmit'。

\n

\n

在不使用 useFormik 的情况下我该如何做到这一点

\n

\n

}\n_handleSubmit = (values) =>{\n\n  const user = firebase.auth().currentUser.uid;\n  if(user){\n    const profileData = firebase.database().ref('kullaniciBilgiler/'+`${user}`);\n    profileData.update({\n      age:values.age,\n      cinsiyet:values.cinsiyet,\n      email:values.email,\n      job:values.job,\n      liveCity:values.liveCity,\n      name:values.name,\n      school:values.school,\n      schoolLevel:values.schoolLevel,\n      surname:values.surname,\n    }).then(()=>console.log('i\xc5\x9flem tamam usta'))\n  }\n  alert('ba\xc5\x9far\xc4\xb1l\xc4\xb1 dirim!');\n  \n\n}\n\n\n\n  render() {\n\n\n\n    return (\n\n      <SafeAreaView style={styles.container} >\n       \n        <View style={styles.profilePhoto}>\n        <TouchableOpacity  onPress={this.selectFile} >\n        <Image\n            source={{\n              \n              uri:  this.state.fileUri,   \n             // this.state.urlPP\n            }}\n            style={styles.profPhoto}\n          />\n           </TouchableOpacity>\n          \n         \n        </View>\n        \n        <View style={styles.profileDetails}>\n        <View style={{flex:1, alignSelf:'center', justifyContent:'center'}}>\n       <FlatList style={{width:'100%',}}\n          data={this.state.list} \n          keyExtractor={(item)=>item.key}\n          renderItem={({item})=>{\n             return(\n            \n              <Formik\n              initialValues={{\n               \n                val : item.val\n                \n               \n              }}\n              onSubmit={this._handleSubmit}\n              validationSchema={\n                Yup.object().shape({\n                 \n                  val: Yup.string().required(<Text style={{ color: 'red' }}>basar\xc4\xb1s\xc4\xb1z {item.key}</Text>),\n                  \n\n                  \n  \n                })\n              }\n            >\n              {\n                ({\n                  values,\n                  handleSubmit,\n                  isValid,\n                  isSubmitting,\n                  errors,\n                  handleChange\n                }) => (\n                <View style={{flexDirection:'column',\n                width:windowWidth,\n                paddingHorizontal:20,\n                paddingVertical:10}}>\n                   <Text style={styles.ppText}>{item.key}</Text> \n                   <TextInput\n                   \n                   defaultValue={values=item.val}\n                   style={styles.input}\n                   onChangeText={handleChange(item.key)}\n                   \n                  \n                   ></TextInput>\n                   {(errors.val) && <Text>{errors.val}</Text>}\n                  \n              \n                <TouchableOpacity //I want to get this button out of the formik\n              //disabled={!isValid || isSubmitting}\n              onPress={handleSubmit}\n             \n              >\n                <Text style={{textAlign:'center'}}>G\xc3\x9cNCELLE</Text>\n              </TouchableOpacity>\n              </View>\n                 )\n\n                 \n                }\n                 \n              </Formik>\n                )\n             }}/>\n     </View>       \n     <TouchableOpacity \n              //disabled={!isValid || isSubmitting}\n              onPress={this}\n              \n              >\n                <Text style={{textAlign:'center'}}>G\xc3\x9cNCELLE</Text>\n              </TouchableOpacity>\n   </View>\n                   \n      </SafeAreaView>\n      \n   \n

\n

我想在 formik 之外使用我在 formik 中使用的 TouchableOpacity。我不知道如何在 formik 函数之外使用 handleSubmit'。

\n

Answer 1

您可以在 formik 组件上使用“useRef”。

稍后您可以在任何函数中使用该引用并可以调用 formik 方法。

Formik 有一个 innerRef 属性，您可以在其中传递使用 useRef 创建的变量。

import React,{useRef} from 'react'
import { View, Text,TextInput, Button } from 'react-native'
import { Formik} from 'formik'

export default function Example(props) {
    const formikRef = useRef(null)
    const initialValues = {
        email:''
    }
    const submitForm = () =>{
        formikRef.current.submitForm()
    }

    return (
        <View>

            <Formik
            innerRef={formikRef}
                initialValues={initialValues}
                onSubmit={values => console.log(values)}
            >
                {({ handleChange, handleBlur, handleSubmit, values }) => (
                <View>
                    <TextInput
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    value={values.email}
                    />
                    
                </View>
                )}
            </Formik>


            <Button title="submit" onPress={submitForm} />
        </View>
    )
}