Проблема с textinput при удалении цифр , после введения

Question

Есть React компонент, который выводит введенное значение в поле input.
В компоненте есть проверка на введенные данные. Введенное значение должно быть числом(цифрой).

export default function AppTextInput({icon, placeholder,onChangeText, ...otherProps}) {

const  onChanged =(text) =>{
    let newText = '';
    let numbers = '0123456789';
    for (var i=0; i < text.length; i++) {
        if (text=='0') {
            alert("zero is not allowd");
        } else if (numbers.indexOf(text[i]) > -1) {
            newText = newText + text[i];
            onChangeText(text)
        } else {
            alert("please enter integer numbers only");
            onChangeText('')
        }
    }

}
return (

    <View style={styles.container}>
        {icon &&
            <MaterialCommunityIcons style={{marginRight: 10}} name={icon} color={colors.grayMedium} size={20}/>}
        <TextInput style={defaultStyles.text} placeholder={placeholder}
                   onChangeText={onChanged}  maxLength={3} {...otherProps}
        />
    </View>
)

}

Компонент используется во многих местах. Пример использования:

 <View style={{top: -80}}>
                <AppTextInput icon="timer-sand"  placeholder={"Prep Time"} keyboardType='numeric' value={prepTime} onChangeText={setPrepTime}/>
                <AppTextInput icon="timer" placeholder={"Round Duration"} keyboardType='number-pad' value={roundDuration} onChangeText={setRoundDuration}/>
                <AppTextInput icon="timer" placeholder={"Break Duration"} keyboardType='number-pad' value={breakDuration} onChangeText={setBreakDuration}/>
                <AppTextInput icon="repeat" placeholder={"Number of Rounds"} keyboardType='number-pad'  value={numRounds} onChangeText={setNumRounds}/>
                <AppTextInput icon="format-list-numbered" placeholder={"Number of Sets"} keyboardType='number-pad' value={numSets} onChangeText={setNumSets}/>
                {exerciseInputEles}
            </View>

При введении 1 значного числа, удалить его из textinput уже невозможно, при введении 2-3... цифр они спокойно удаляются, а первая уже нет, помогите исправить пожалуйста.

Answer 1

В onChanged при удалении данных приходит значение '', которое никак не обрабатывается. Один из вариантов, проверить значение на входе и если пусто, то сохранить значение в стейте и прекратить выполнение дальшейшего кода.

const onChanged = (text) => {
  if (!text) {
    onChangeText('');
    return;
  }
  let newText = '';
  let numbers = '0123456789';
  for (var i = 0; i < text.length; i++) {
    if (text === '0') {
      alert("zero is not allowd");
    } else if (numbers.indexOf(text[i]) > -1) {
      newText = newText + text[i];
      onChangeText(text)
    } else {
      alert("please enter integer numbers only");
      onChangeText('')
    }
  }
}

Если вам надо как то по другому оборабатывать пустое значение, должно выглядеть примерно так

const onChanged = (text) => {
  if (text) { // В text что то есть
    // какой то ваш код
  } else { // В text ничего нет
    // Ваш обработчик пустого значения
  }
}

БЛОГ НА HUSL

Проблема с textinput при удалении цифр , после введения

Ответы (1 шт):