не соответствует состоянию компонента

Question

Я строю простую форму в React Native.Я пытаюсь сделать так, чтобы при изменении значения поля ввода я хотел обновить состояние (в данном случае phone).Значение поля ввода всегда равно значению состояния.Однако при изменении значения поля ввода значение состояния (phone) не обновляется.Заранее спасибо.Вот код.

import React from 'react'
import {StyleSheet, TextInput, View} from 'react-native'

const styles = StyleSheet.create({
  input: {
    padding: 5,
    borderColor: 'black',
    borderWidth: 1,
  }
})

export default class AddContactForm extends React.Component {
  state = {
    phone: 'sdfksd',
  }

  handlePhoneChange = (phone) => {
    this.setState({
      phone: '111'
    })
  }
  
  render() {
    return (
      <View style={{paddingTop: 40}}>
        <TextInput 
          style={styles.input} 
          value={this.state.phone}
          onChangeText={this.handlePhoneChange} 
          keyboardType="numeric"
          placeholder="Phone"
        />
      </View>
    )
  }
}

ОБНОВЛЕНО: Несмотря на то, что я установил phone в handlePhoneChange, я все еще могу обновить текстовое поле, очевидно, на другое значение.Это несовместимо между состоянием и текстовым полем.

Answer 1

Измените вашу функцию дескриптора следующим образом.

handlePhoneChange = (phone) => {this.setState ({phone: phone})}

Answer 2

onChangeText принимает обратный вызов.Так что в вашем случае передайте ввод вашей функции следующим образом:

onChangeText={ val => this.handlePhoneChange(val)}