Блог

Компонент TextInput не должен принимать другие символы, кроме числовых.

Реальная проблема заключается в том , что при вставке внутрь TextInput: 555 555 555 вместо 555555555 я получаю 555 555 5 .

Кроме этого, я могу вставить все, что захочу ^*D -/6 .

Я попробовал регулярное выражение на

 function handler(e) {
  const tmp =  e.replace(/[^0-9]/g, '');       
  setValue(tmp)
}
 

Есть ли какой-нибудь хороший способ поймать событие вставки или что-то в этом роде?

Код прост:

 export default function App() {
  const [value, setValue] = React.useState('');
    
  function handler(e) {
    setValue(e);
  }
    
  return (
    <View style={styles.container}>
      <TextInput
        value={value}
        onChangeText={handler}
        keyboardType="numeric"
        maxLength={9}
      />
    </View>
  );
}
 

Не уверен, что вы сможете поймать событие вставки. Один из способов решить вашу конкретную проблему-использовать регулярное выражение и принудительно применять максимальную длину из обработчика onChangeText.

Пример

 export default function App() {
  const [value, setValue] = React.useState('');

  function handler(text) {
    if (text.length >= value.length   2){
      // Maybe this can be captured as a paste event?
      // Haven't tested it, but it's an idea.
      // Since key-ins cannot increase the length of the value by 
      // more than 1 at a time, if text length increase by 2 or more,
      // then I think it's safe to assume it's a paste event.
    }

    const maxLength = 9
    let cleanNumber = text.replace(/[^0-9]/g, "")
    if (cleanNumber.length > maxLength) {
      cleanNumber = cleanNumber.substr(0, maxLength)
    }
    setValue(cleanNumber);
  }

  return (
    <View style={styles.container}>
      <TextInput
        value={value}
        onChangeText={handler}
        keyboardType="numeric"
        // maxLength={9} <-- Don't use maxLength prop here.
      />
    </View>
  );
}