如何截断 React Native Formik 表单字段中的值答案

【问题标题】：How to truncate value in React Native Formik form field如何截断 React Native Formik 表单字段中的值
【发布时间】：2019-11-27 23:27:26
【问题描述】：

我有一个字段，我只希望长度最大为 3 个数字。我正在使用是的，但是，它只会通知用户错误，它不会阻止用户输入比预期更长的数字。

为了解决这个问题，我创建了一个对输入值进行切片的函数。这看起来可行，它将表单字段中的长度保持为我想要的长度，但是，当我单击提交时，该字段的值是未切片的版本。

这是我的代码...

            <TextInput
              style={styles.text}
              value={_checkLength(values.number, 3)}
              onChangeText={handleChange('number')}
              onBlur={() => setFieldTouched('number')}
              placeholder="Number"
            />

我的 _checkLength 函数很简单...

_checkLength = (value, length) => {
  return value.slice(0, length)
}

为什么这不起作用？

【问题讨论】：

可以在onChangeText内部调用setFieldValue函数来更新表单中的值。
为什么不在 Textnput 中使用 maxLength 属性？
Geeze，@CarlosJulioMartinezOrtega 成功了，不敢相信我错过了。这么简单 - 大声笑。

标签： react-native formik yup

【解决方案1】：

留下这个答案以便人们了解如何使用setFieldValue，但@Carlos 有正确而明显的答案。也就是简单的使用maxLength={num}

感谢@MohammedAshfaq。他的回答是正确的，但我想提供需要更新的确切代码。答案是通过将setFieldValue 放入onChangeText 字段来运行setFieldValue。我必须传入该值，然后使用传入的值运行我的函数。现在，当我提交它时，它会提交从 _checkLength 函数返回的正确值。

            <TextInput
              style={styles.text}
              value={values.number}
              onChangeText={(value) => setFieldValue('number', _checkLength(value, 3))}
              onBlur={() => setFieldTouched('number')}
              placeholder="Uniform Number"
            />

【讨论】：