Question

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

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

这是我的代码...

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

为什么这不起作用？

Answer 1

留下这个答案，以便人们可以看到如何使用setFieldValue，但是@Carlos给出了正确而明显的答案。那就是简单地使用maxLength={num}

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

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

如何在React Native Formik表单字段中截断值

1 个答案: