javascript - 数字的 Formik 输入值即使在作为数字通过 Formik 验证后也变为字符串

Question

我有一个通过 Formik 输入的数字，但即使它通过了 Formik 验证，生成的输入仍归类为 string 。

                <Formik
                    initialValues={{ price: '' }}
                    onSubmit={submitHandler}
                    validationSchema={yup.object().shape({
                    price: yup
                        .number()
                        .required(),
                    })}
                >
                    {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
                        <View style={styles.form}>
                            <View style={styles.fieldset}>
                                <Text style={{ marginLeft: 40, marginVertical: 10 }}>
                                    <Text style={{ color: '#FF5D4E'}}>* </Text>
                                    Price
                                </Text>
                                <TextInput
                                    value={values.price}
                                    keyboardType = 'numeric'
                                    onChangeText={handleChange('price')}
                                    placeholder="Rental price of your item per day"
                                    style={styles.textInput}
                                    onBlur={() => setFieldTouched('price')}
                                />
                            </View>
                            {touched.price && errors.price &&
                                <Text style={{ fontSize: 10, color: 'red' }}>{errors.price}</Text>
                            }

                            <TouchableOpacity
                                disabled={!isValid || loading}
                                onPress={handleSubmit}
                                style={styles.button}
                            >
                                <Text style={styles.buttonText}>Submit</Text>
                            </TouchableOpacity> 
                        </View> 
                    )}
                </Formik> 

输入价格时，任何非数字都会收到警告。但是，当我控制台记录传递给 submitHandler 函数的值时， typeof 将价格值显示为字符串。

Answer 1

您可以解析 string onChangeText 中的值像这样:

{({ values, ...., setFieldValue }) => {

// parse string value to int
const parseAndHandleChange = (value, setFieldValue, id) => {
      const parsed = parseInt(value, 10)
      setFieldValue(id, parsed)
    }

return (
 <View>
 {.....}
 <TextInput
   value={values.price}
   keyboardType = 'numeric'
   onChangeText={value => parseAndHandleChange(value, setFieldValue, 'price')}
   placeholder="Rental price of your item per day"
   style={styles.textInput}
   onBlur={() => setFieldTouched('price')}
 />
 </View>
)}

这只是一个示例，请根据您的用例随意修改。希望能帮助到你。