Реактивный родной TypeScript TextInput не работает - PullRequest
Новая
       47

Реактивный родной TypeScript TextInput не работает

1 голос
/ 22 июня 2019

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

import React, { Component } from "react";
import { View, StyleSheet, TextInput, Button, Alert, TouchableHighlight, Text } from "react-native";
import { styles } from "../styles/CommonStyles";

class LoginScreen extends Component {
    constructor(props: Readonly<{}>) {
        super(props)
    }
    state = {
        email: ''
    }
    static navigationOptions = {
        title: 'Login',
        header: null
    }
    render() {
        const { navigate } = this.props.navigation
        return (
            <View style={styles.container}>

                <TextInput
                style={loginStyles.emailInput}
                multiline={false}
                autoCorrect={false}
                autoCapitalize='none'
                keyboardType='email-address'
                value={this.state.email}
                onChangeText={(text) => this.handleEmail(text)}
                placeholder='Enter Email'/>

                <TouchableHighlight
                style={loginStyles.buttonGenerateOTP}
                onPress={this.onGenerateOTP}>
                    <Text
                    style={loginStyles.textGenerateOTP}>GENERATE OTP</Text>
                </TouchableHighlight>
            </View>
        )
    }

    handleEmail(text: string) {
        console.log('Email: ' + text)
        this.setState({ email: text })
        console.log('State Email: ' + this.state.email)
    }

    onGenerateOTP() {
        Alert.alert(
            'Email Entered',
            this.state.email,
            [
                { text: 'OK', style: 'cancel' }
            ],
            { cancelable: false }
        )
    }
}

export default LoginScreen

const loginStyles = StyleSheet.create({
    emailInput: {
        fontSize: 15,
        backgroundColor: '#ECECEC',
        borderColor: '#999999',
        borderRadius: 4,
        borderWidth: 0.5,
        alignSelf: 'stretch',
        textAlign: 'center',
        margin: 10,
      },
      buttonGenerateOTP: {
          backgroundColor: '#008CBA',
          borderRadius: 4,
          alignSelf: 'stretch',
          justifyContent: 'center',
          alignItems: 'center',
          margin: 10,
          padding: 10,
    },
    textGenerateOTP: {
        fontSize: 20,
        color: '#FFFFFF',
    },
})

Он содержит только вход и кнопку, на которой должно отображаться предупреждение с введенным электронным письмом.Но когда я нажимаю кнопку, я получаю следующую ошибку: 

undefined is not an object (evaluating 'this.state.email')
onGenerateOTP
LoginScreen.tsx:43:8
...

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

РЕДАКТИРОВАТЬ Функция входа в систему handleEmail(text) фактически печатает состояние, хотя с предыдущим значением текста (т. Е. При вводе QWERT, он напечатает QWER, а когда я введу QWERTY, он напечатает QWERT), но текстовый параметр записывается правильно

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

Я решил проблему. Проблема заключалась в том, что я должен был связать функции. В конструкторе, указанном ниже, исправлена ​​ошибка. 

constructor(props: Readonly<{}>) {
    super(props)
    this.handleEmail = this.handleEmail.bind(this)
    this.onGenerateOTP = this.onGenerateOTP.bind(this)
}
0 голосов
/ 22 июня 2019

Вы должны вызвать в своем конструкторе или метод жизненного цикла componentWillMount 

this.setState{{'email': 'your_value}}

Изменять состояние только через метод setState

...