Как усечь значение в поле формы React Native Formik

У меня есть поле, в котором я хочу, чтобы длина была максимум 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)
}

Почему это не работает?


react-native formik yup
person Ronald    schedule 19.07.2019    source источник
comment
вы можете вызвать функцию setFieldValue внутри onChangeText, чтобы обновить значение в форме.   -  person Mohammed Ashfaq    schedule 19.07.2019
comment
Почему бы не использовать опору maxLength в вашем Textnput?   -  person Charlie    schedule 19.07.2019
comment
Боже, @CarlosJulioMartinezOrtega, которая сработала, не могу поверить, что я это пропустил. Все намного проще - лол.   -  person Ronald    schedule 19.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Оставив этот ответ, чтобы люди могли видеть, как использовать 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"
            />
person Ronald    schedule 19.07.2019