如何在Formik中设置值?

问题描述 投票:0回答:1

我正在使用react native中的功能组件,并且我想以Formik的初始状态存储图像URI。

我在_pickimage函数中获取了图像URI,但是我仍然无法将其传递给Formik的初始状态。

如何将URI值设置为初始状态。

是否可以将其他自定义值从功能状态存储到Formik初始状态?

import React, { useState } from 'react';
import { View, TextInput, Picker, Text, Button } from 'react-native';
import { globalStyles } from '../styles/global'
import { Formik } from "formik";
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

export default function form(props) {
    const { register } = props
    const getPermissionAsync = async () => {
        if (Constants.platform.ios) {
            const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
            if (status !== 'granted') {
                alert('Sorry, we need camera roll permissions to make this work!');
            }
        }
    }
    const _pickImage = async () => {
        getPermissionAsync();
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        });
        if (!result.cancelled) {
            console.log(result.uri)
         // Getting Image URI value here
        }
    }
    return (      
            <View >
                <Formik
                    initialValues={
                        {
                            image: '',                      
                        }}

                    onSubmit={(values, actions) => {                      
                            register(values);          
                            console.log(values);
                            actions.resetForm(); 
                    }}                    
                >
                    {
                        (formikprops) => (
                            <View>
                                <Button
                                    title="image"
                                    icon="add-a-photo" mode="contained"
                                    onPress={() => { _pickImage(formikprops.handleChange('image')) }}
                                />
                                {formikprops.values.image && formikprops.values.image.length > 0 ?
                                    <Image source={{ uri: formikprops.values.image }} style={{ width: 200, height: 200 }} /> : null}

                                <Button title="submit" color="coral" onPress={formikprops.handleSubmit} />
                            </View>
                        )
                    }
                </Formik>

            </View>

    )
}
reactjs react-native formik
1个回答
0
投票

您可以像使用formik一样使用setFieldValue功能>

const _pickImage = async (setFieldValue, field) => {
        getPermissionAsync();
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        });
        if (!result.cancelled) {
            console.log(result.uri)
         // Getting Image URI value here
           setFieldValue(field, result.uri)
        }
    }

    ----

    <Button
        title="image"
        icon="add-a-photo" mode="contained"
        onPress={() => { _pickImage(formikprops.setFieldValue, 'image') }}
    />
© www.soinside.com 2019 - 2024. All rights reserved.