Данные не изменяются с помощью onDataChange после использования повторно используемого компонента в реагировать родной

Question

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

Здесь я получаю свое имя пользователя и пароль

                <LoginTextBox placeholderName='Email'
                  value={this.state.username}
                  onChangeText={(username) => this.setState({ username })}
                ></LoginTextBox>
                <LoginTextBox placeholderName='Password'
                 value={this.state.password}
                 onChangeText={(password) => this.setState({ password })}
                ></LoginTextBox>
                <TouchableOpacity 
                onPress={this.onLogin}>

Здесь я создал LoginTextBox

    render() {
  return (
       <TextInput
        placeholder={this.props.placeholderName}
        style={styles.input}>{this.props.value}</TextInput>
  );
}

Моя проверка

  onLogin=()=> {
const { username, password } = this.state;
if (username.match("bhaskarj61@gmail.com")) {
this.props.navigation.navigate('NewsFeed');
}
else {
  Alert.alert('enter valid email')
}

}

Answer 1

onChangeText -атрибут никогда не присоединяется к вашему TextInput -компоненту.

Вы можете сделать что-то похожее на это.

LoginTextBox -компонентный метод визуализации

render(){ 
  return(
     <TextInput
      {...this.props}
      placeholder={this.props.placeholderName}
      style={styles.input}>{this.props.value}</TextInput>
   )
}

и здесь {...this.props} в компоненте TextInput передает ваш onChangeText слушатель фактическому компоненту React Native.

В этом случае это передало бы атрибуты value, placeholderName и onChangeText фактическому компоненту. Таким образом, вы могли бы также использовать placeholderName, чтобы просто использовать placeholder.