数字的 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

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


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

这只是在将 Formik 与 React Native 结合使用时发生的。在 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>

编码愉快！

数字的 Formik 输入值变成字符串，即使它作为数字通过 Formik 验证后也是如此

Formik input value for a number becomes a string even after it passes the Formik validation as a number

javascript

reactjs

react-native

formik