reactjs - 为什么当我设置多个函数时，Formik 的 handleChange 不起作用？

Question

我在 formik 上遇到问题，当我在 onValueChange 中添加其他函数时，formik 的 handleChange 无法正常工作。是否有针对此类场景的解决方案。当我提交没有值(value)的表单时，它现在就发生了。

表单提交结果:

pickup_region: ""

其他功能:

const HandleGetProvince = (id) => {

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

福米克:

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

Answer 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 .