Как правильно обрезать ввод пользователя в React Native?

У меня есть TextInput, который получает onChangeText в качестве опоры:

<TextInput
  ...
  value = {this.state.myString}
  onChangeText = {this.updateInput.bind(this)}
/>

А updateInput представлен как:

updateInput(newString) {
  this.setState({ myString: newString.trim() });
}

Это работает только для Android. Есть ли способ обрезать ввод пользователя на обеих платформах (iOS, Android)?

Обновлять

Фактически, строка обрабатывается как обрезанная, но вы все равно можете ввести столько пробелов, сколько захотите, на iOS. И если вы введете два пробела подряд, точка будет выглядеть так, как будто это будет конец предложения. Это нежелательное поведение, есть ли способ его избежать?

Ссылка с примером видео: https://streamable.com/dzl3c

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

— 24.09.2018 18:46

Я не могу представить. Но я могу свободно вводить пробелы на iOS. @slashsharp

— 24.09.2018 18:51

Можно попробовать заменить trim() на .replace(/^\s+|\s+$/g, "");?

— 24.09.2018 18:57

Я уже пробовал такой подход, к сожалению, не помогает. Похоже, это как-то связано с мелочами RN. @PavelOganesyan

— 24.09.2018 19:01

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

— 24.09.2018 20:53

Как я могу запретить пробелы? Я передаю updateInput в качестве обратного вызова, поэтому кажется, что нажатие клавиши всегда будет обрабатываться во внутренней реализации компонента TextInput. @RobbieMilejczak

— 25.09.2018 08:04

вам нужно будет сделать .replace(/\s/g, '') в качестве аргумента в пользу updateInput. Это приводит к тому, что пользователь может ввести один пробел в любой момент времени, но этот пробел будет удален после ввода любого другого символа. Честно говоря, я бы открыл это как проблему в репозитории на github, поддерживающем реакцию, это не очень важно, но это странное поведение

— 25.09.2018 14:42

Мудрый вопрос, спасибо @RobbieMilejczak

— 26.09.2018 14:02

android ios react-native

24.09.2018 18:43

Коллекции (ArrayList , HashSet , HashMap)

3 768

Ответы 1

Один из способов обрезки подобным образом с помощью свойства onChangeText с помощью value.trim(). Вот рабочий пример на моем RN 0.62.*

 <TextInput
      name = "email"
      type = "text"
      keyboardType = "email-address"
      keyboardAppearance = "light"
      returnKeyType = "next"
      onChangeText = {value => { setValue('email', value.trim(), true) }}
      blurOnSubmit = {false}
      onSubmitEditing = {() => this.password.focus()}
      autoCapitalize = "none"
      autoCorrect = {true}
      textContentType = "emailAddress"
      editable = {!isLoading}
      placeholder = {Strings.INPUT_EMAIL_ADDRESS}
      placeholderTextColor = {Theme.GRAY_LIGHT_COLOR}
      color = {Theme.GRAY_DARK_COLOR}
      style = {[styles.input, { borderColor: errors.email ? Theme.ORANGE_COLOR : Theme.PRIMARY_DARK_COLOR }]}
      ref = {ref => this.email = ref} />

12.06.2020 21:36