handlesubmit 在 formik 之外反应本机 formik

Question

我想在 formik.I 之外使用我在 formik 中使用的 TouchableOpacity 不知道如何在 formik 的功能之外使用 handleSubmit'。

how can i do it without using useFormik

}
_handleSubmit = (values) =>{

  const user = firebase.auth().currentUser.uid;
  if(user){
    const profileData = firebase.database().ref('kullaniciBilgiler/'+`${user}`);
    profileData.update({
      age:values.age,
      cinsiyet:values.cinsiyet,
      email:values.email,
      job:values.job,
      liveCity:values.liveCity,
      name:values.name,
      school:values.school,
      schoolLevel:values.schoolLevel,
      surname:values.surname,
    }).then(()=>console.log('işlem tamam usta'))
  }
  alert('başarılı dirim!');
  

}



  render() {



    return (

      <SafeAreaView style={styles.container} >
       
        <View style={styles.profilePhoto}>
        <TouchableOpacity  onPress={this.selectFile} >
        <Image
            source={{
              
              uri:  this.state.fileUri,   
             // this.state.urlPP
            }}
            style={styles.profPhoto}
          />
           </TouchableOpacity>
          
         
        </View>
        
        <View style={styles.profileDetails}>
        <View style={{flex:1, alignSelf:'center', justifyContent:'center'}}>
       <FlatList style={{width:'100%',}}
          data={this.state.list} 
          keyExtractor={(item)=>item.key}
          renderItem={({item})=>{
             return(
            
              <Formik
              initialValues={{
               
                val : item.val
                
               
              }}
              onSubmit={this._handleSubmit}
              validationSchema={
                Yup.object().shape({
                 
                  val: Yup.string().required(<Text style={{ color: 'red' }}>basarısız {item.key}</Text>),
                  

                  
  
                })
              }
            >
              {
                ({
                  values,
                  handleSubmit,
                  isValid,
                  isSubmitting,
                  errors,
                  handleChange
                }) => (
                <View style={{flexDirection:'column',
                width:windowWidth,
                paddingHorizontal:20,
                paddingVertical:10}}>
                   <Text style={styles.ppText}>{item.key}</Text> 
                   <TextInput
                   
                   defaultValue={values=item.val}
                   style={styles.input}
                   onChangeText={handleChange(item.key)}
                   
                  
                   ></TextInput>
                   {(errors.val) && <Text>{errors.val}</Text>}
                  
              
                <TouchableOpacity //I want to get this button out of the formik
              //disabled={!isValid || isSubmitting}
              onPress={handleSubmit}
             
              >
                <Text style={{textAlign:'center'}}>GÜNCELLE</Text>
              </TouchableOpacity>
              </View>
                 )

                 
                }
                 
              </Formik>
                )
             }}/>
     </View>       
     <TouchableOpacity 
              //disabled={!isValid || isSubmitting}
              onPress={this}
              
              >
                <Text style={{textAlign:'center'}}>GÜNCELLE</Text>
              </TouchableOpacity>
   </View>
                   
      </SafeAreaView>

我想在 formik.I 之外使用我在 formik 中使用的 TouchableOpacity 不知道如何在 formik 的功能之外使用 handleSubmit'。

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

handlesubmit 在 formik 之外反应本机 formik

handlesubmit in react native formik outside of formik

reactjs

react-native

yup

formik