为什么我设置多个功能时Formik的handleChange不起作用？答案

【问题标题】：Why the handleChange of Formik is not working when I set multiple functions?为什么我设置多个功能时Formik的handleChange不起作用？
【发布时间】：2022-01-10 08:45:56
【问题描述】：

我在formik上遇到问题，当我在onValueChange中添加其他功能时，formik的handleChange无法正常工作。有没有针对这种情况的解决方案。它发生在我提交表单时没有任何价值。

表单提交结果：

pickup_region: ""

其他功能：

const HandleGetProvince = (id) => {

    PickupAddress[0]['pickup_region'] = id
    dispatch(ProvinceList(id));
}

Formik：

<Formik
        initialValues={{
            pickup_region: '',
        }}
        onSubmit={(values) => ProcessBookingBtn(values)}
    >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (

            <View style={{ backgroundColor: 'white', borderColor: 'white', borderRadius: 20 }}>
                <VStack space={1} p={5}>
                    <View>
                        
                        

                        <View style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', alignItems: 'flex-start' }}>
                            <View style={{ width: '50%', padding: 3 }}>
                                <Text style={{ fontSize: 12, marginTop: 10 }}>Region</Text>
                                <Select
                                    accessibilityLabel="Region"
                                    placeholder="Region"
                                    placeholderTextColor="#000"
                                    color="#000"
                                    mt={1}
                                    name="pickup_region"
                                    onValueChange={(itemValue) => {[handleChange('pickup_region'), HandleGetProvince(itemValue)] }}
                                >
                                    {
                                        regions && regions.data ? (
                                            regions.data?.map((data, i) => {
                                                return (

                                                    <Select.Item key={i} label={data.name} value={data.id.toString()} />

                                                )
                                            })
                                        ) : <Select.Item label="No Region Available" value="" />
                                    }
                                </Select>
                            </View>

                        <View style={{ padding: 40 }}>
                            <TouchableOpacity onPress={handleSubmit}>
                                <Button type="submit" style={{ borderColor: '#FA0A0A', backgroundColor: '#FA0A0A' }}>
                                    <Text style={{ color: 'white', fontWeight: 'bold' }}>Save</Text>
                                </Button>
                            </TouchableOpacity>
                        </View>
                    </View>

                </VStack>

            </View>

        )}

    </Formik>

【问题讨论】：

标签： reactjs react-native formik

【解决方案1】：

Prop onValueChange 接受一个函数，该函数接收 value。

onValueChange={(itemValue) => {
  // your definition
}}

为了调用两个改变值的函数，你必须使用setFieldValue。将您的功能更改为：

onValueChange={(itemValue) => {
  setFieldValue("pickup_region", itemValue);
  HandleGetProvince(itemValue);
}

你从Formik组件的props中得到setFieldValue：

{({ handleChange, handleBlur, handleSubmit, values, errors, touched, setFieldValue }) => (...)

还有一点：用大写命名你的函数并没有错，但是在大多数代码库中你会遇到 camelCase。您可以阅读有关约定的更多信息here。

【讨论】：

谢谢你，这对我帮助很大。