ReactNative TextInput 'onChangeText не вызывается

Я хочу, чтобы onTextChange запускался, когда я устанавливаю ему текст через изменения состояния. Я создаю свою экранную цифровую клавиатуру для ввода пин-кода, и я хочу улавливать изменения текста на TextInput, когда пользователь нажимает эти клавиши.

this.setState({text})

Мой TextInput выглядит так:

<TextInput
  editable = {false}
  onChangeText = {text => Alert.alert(text)}
  secureTextEntry = {true}
  value = {this.state.text}

UPD: Я нашел как-то связанный вопрос, но на него тоже нет ответа: TextInput не работает должным образом при программном вводе текста

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
0
3 997
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы устанавливаете опору editable на false, тогда текст TextInput никогда не изменится, и onChangeText никогда не вызовет ...

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

madim 28.05.2018 08:50

так что проверьте и это: onChangeText = {(text) => {alert (text)}}

Ali SabziNezhad 28.05.2018 08:55

Вы можете использовать его, как показано ниже.

class MyComponent extends Component{
  constructor(props){
    super(props)
    this.state = { text: null }   //By default it will be null.
    this._handleChangeEvent = this._handleChangeEvent.bind(this)  //You need to bind your function here.
  }

  _handleChangeEvent(e) {
        const { name, value } = e.target;  //it will destructure your name and value where ever you are using _handleChangeEvent method.
        this.setState({
            [name]: value // here we are setting the state dynamically.
        });
        alert(value)
    }

   render() {
     return(
       <View>
         <TextInput
           editable = {true}
           onChangeText = {this._handleChangeEvent}  // this will call _handleChangeEvent method.
           secureTextEntry = {true}
           value = {this.state.text}/>       
       </View>
     )
   }
}

Этот код может вам помочь:

     this.state = {Alert.alert(
                         'Update available //your Title',
                         'Keep your app up to date to enjoy the latest 
                          features //your Message',
                          [
                            {
                             text: 'Cancel',
                             onPress: () => console.info('Cancel Pressed'),
                             style: 'cancel',
                             }
                           ]
                      )
    }
    <TextInput
      editable = {false}
      onChangeText = {text => Alert.alert(text)}
      secureTextEntry = {true}
      value = {this.state.text}
    />
Ответ принят как подходящий

В итоге я использовал onContentSizeChange, который вызывается при изменении текста. Я обнаружил, что некоторые методы TextInput не работают должным образом, когда текст задается программно.

Замечательный товарищ. Большое спасибо!

Mark 24.10.2018 23:25

Как именно вы использовали onContentSizeChange? насколько мне известно, вы не можете получить значение текста в onContentSizeChange.

Lucky_girl 12.05.2019 22:46

@Lucky_girl Насколько я помню, я использовал его только для отслеживания изменений в TextInput; не получить значение TextInput

madim 13.05.2019 15:10

Я думаю, что функция обработчика событий для onChangeText является асинхронной, поэтому вы должны использовать async / await

<Input onChangeText = {(val) => { this.changeHandler(val) }} />

и метод обработчика изменений должен быть

changeHandler = async (val) =>{
  await this.setState({
    [someKey]: val
 })
  .
  .
  .
  do other stuff that depends on val
}

раньше он работал, чтобы сделать http-запрос, который запускается при изменении входного значения и использует входное значение.

Другие вопросы по теме