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

Question

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

this.setState({text})

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

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

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

Answer 1

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

Answer 2

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

Answer 3

Потому что вы не связались с этим:

      onChangeText={text => Alert.alert(text)}

должно измениться:

      onChangeText={this.changeFunction.bind(this)}

затем добавьте функцию:

      changeFunction(text){
   alert(text);
}

=> Вы можете протестировать, а затем проголосовать за меня, если это не сработает :)

Answer 4

Я думаю, что функция обработчика событий для 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-запроса, который запускается при изменении входного значения, и использует входное значение.

Answer 5

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

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

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

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

Answer 6

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

     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.log('Cancel Pressed'),
                             style: 'cancel',
                             }
                           ]
                      )
    }
    <TextInput
      editable={false}
      onChangeText={text => Alert.alert(text)}
      secureTextEntry={true}
      value={this.state.text}
    />