Typescript 反应本机类型脚本文本输入不工作
我试图通过做一个基本的应用程序来学习react native。我学习了许多在线教程,并为登录屏幕制作了以下课程:Typescript 反应本机类型脚本文本输入不工作,typescript,react-native,react-native-textinput,react-native-component,Typescript,React Native,React Native Textinput,React Native Component,我试图通过做一个基本的应用程序来学习react native。我学习了许多在线教程,并为登录屏幕制作了以下课程: import React, { Component } from "react"; import { View, StyleSheet, TextInput, Button, Alert, TouchableHighlight, Text } from "react-native"; import { styles } from "../styles/CommonStyles";
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',
},
})
我对react native和typescript非常陌生,但看看代码,我无法找出任何问题。我在这里做错了什么
编辑
登录
handleEmail(text)
功能实际上是在打印状态,尽管之前的文本值(即,当我输入QWERT
时,它将打印QWER
,当我输入QWERTY
时,它将打印QWERT
),但是文本参数记录正确您必须调用构造函数或组件willmount生命周期方法
this.setState{{'email': 'your_value}}
仅通过setState方法更改状态我解决了问题。问题是我必须绑定函数。按照下面的说明更改构造函数修复了该问题
constructor(props: Readonly<{}>) {
super(props)
this.handleEmail = this.handleEmail.bind(this)
this.onGenerateOTP = this.onGenerateOTP.bind(this)
}
构造函数(道具:只读){
超级(道具)
this.handleEmail=this.handleEmail.bind(this)
this.ongGenerateTP=this.ongGenerateTP.bind(this)
}
constructor(props: Readonly<{}>) {
super(props)
this.handleEmail = this.handleEmail.bind(this)
this.onGenerateOTP = this.onGenerateOTP.bind(this)
}