即使在作为数字通过 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>
)}

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

Answer 2

这正是在 React Native 中使用 Formik 时发生的。在 React for web 中，您可以设置输入，type="number"但在 React Native 中则不能。

即使你添加keyboardType="numeric"到<TextInput />. 另一方面，如果您使用 Yup （我强烈推荐），这不会检查类型，而只是检查内容，这意味着"1"可能会被解释为数字。

解决方案：

import Formik from 'formik';
import * as yup from 'yup';

...

<Formik 
  initialValues={{ price: '' }}
  validationSchema={yup.object().shape({ price: yup.number() })}
/>
{(values, setFieldValue, handleBlur) => (
  <TextInput 
    value={values.price} 
    onChangeText={value => setFieldValue('price', parseFloat(value))}
    onBlur={handleBlur('price')}
    keyboardType="decimal-pad"
  />
)}
</Formik>

快乐编码！