我尝试在ReactNative的onChangeText事件上的变量中添加文本

Question

我已经创建了textInput字段，并且已经创建了两个变量email和password。我试图在变量中输入文本，但是它在警报中显示了未定义的数据。请帮忙。我尝试使用电子邮件和密码验证。

  state = {
            email: '',
            password: ''
         }

         handleEmail = (text) => {
            this.setState({ email: text })
         }
         handlePassword = (text) => {
            this.setState({ password: text })
         }
         fn_showalert = (email, pass) => {

          alert('email: ' + email + ' password: ' + pass)
       }

        render() {
            return (
                <ImageBackground style={styles.backgroundContainer} source={require('../assets/stars.jpg')} >

                <View style={{  alignItems: 'center',width:'100%' }}>

                <Text>Home Screen</Text>    
                    <TextInput style = {styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "Email"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   color = "#ffffff"
                   onChangeText = {this.handleEmail}/>

                <TextInput style = {styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "Password"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   color = "#ffffff"
                   onChangeText = {this.handlePassword}/>

                    <Button
                        title="Go to Details"
                        // onPress={() => this.props.navigation.navigate('Second', {
                        //     name: 'John',
                        //     age: 12,
                        // })}
                         onPress={this.gotoSecondButton}
                    />
                </View>
                </ImageBackground>
            );
        }
    } 

 gotoSecondButton() {
        this.fn_showalert()
    }

Answer 1

在您的TextInput中，您从未真正将用户输入的文字设置为状态。

您需要将文本传递到OnChangeText

<TextInput
    OnChangeText = { (text) => this.handleText(text) }
/>

然后您可以编写handleText函数。

this.state = {
    text: ""
}
handleText = (text) => {
    this.setState({text: text})
}

此外，您不应该在自己的状态下编写函数。那真的没有道理。请把它们放在外面。

Answer 2

进行以下更改

fn_showalert = () => {
    const { email, pass } = this.state;
    alert('email: ' + email + ' password: ' + pass)
}