export default class Login extends React.Component {
static navigationOptions = {
title: 'Welcome',
header: null
};
constructor(props) {
super(props);
state = {
email: "",
password: ""
}
}
handleEmail = (text) => {
this.setState({
email: text
})
}
handlePassword = (text) => {
this.setState({
password: text
})
}
validEmail = Email => {
var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9] {
2,
4
}) + $ /
return email.test(Email)
}
onClickListener = (viewId) => {
Alert.alert("Alert", "Button pressed " + viewId);
}
onSubmit() {
if (this.state.email === "" || this.state.email === null) {
alert("Email cannot be empty")
} else if (!this.validEmail(this.state.email)) {
alert("Enter valid Mail id")
} else if (this.state.password === "" || this.state.password === null) {
alert("Password cannot be empty")
} else if (this.state.password.length < 6) {
alert("Password should contain atleast 6 characters")
} else {
alert("success")
this.props.navigation.navigate('ScrollTab');
}
}
render() {
return ( <
View style = {
styles.container
} >
<
Text style = {
styles.LogoText
} > Blood Donation App < /Text> <
View style = {
styles.inputContainer
} >
<
TextInput style = {
styles.inputs
}
placeholder = "Email"
keyboardType = "email-address"
onChangeText = {
(text) => this.handleEmail(text)
}
underlineColorAndroid = 'transparent' / >
<
Image style = {
styles.inputIcon
}
source = {
{
uri: 'https://img.icons8.com/nolan/40/000000/email.png'
}
}
/> <
/View> <
View style = {
styles.inputContainer
} >
<
TextInput style = {
styles.inputs
}
placeholder = "Password"
secureTextEntry = {
true
}
onChangeText = {
(text) => this.handlePassword(text)
}
underlineColorAndroid = 'transparent' / >
<
Image style = {
styles.inputIcon
}
source = {
{
uri: 'https://img.icons8.com/nolan/40/000000/key.png'
}
}
/> <
/View> <
TouchableOpacity style = {
styles.btnForgotPassword
}
onPress = {
() =>
this.onClickListener('restore_password')
} >
<
Text style = {
styles.btnText
} > Forgot your password ? < /Text> <
/TouchableOpacity> <
TouchableOpacity style = {
[styles.buttonContainer,
styles.loginButton
]
}
onPress = {
() => this.onSubmit()
} >>
<
Text style = {
styles.loginText
} > Login < /Text> <
/TouchableOpacity> <
/View>
);
}
}
//正在验证电子邮件和密码.. 如果直接点击onsubmit,会显示null undefined 错误。 我应该将状态设置为某个默认值吗? 错误是: TypeError: TypeError: null 不是对象(正在评估 '这个.state.email') 提交错误 如果我在其中添加 value={this.state.email} 也是 给出 null 未定义的错误
最佳答案
在react中的有状态/类组件中可以通过两种方式声明状态
- 构造函数内部
- 内部类和外部构造函数
构造函数内部:
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
}
}
类内部和构造函数外部:
state = {
email: "",
password: ""
}
并且您需要向 TextInput 元素添加 value 属性
改变
<TextInput style={styles.inputs}
placeholder="Email"
keyboardType="email-address"
onChangeText={(text) => this.handleEmail(text)}
underlineColorAndroid='transparent'/>
至
<TextInput style={styles.inputs}
placeholder="Email"
keyboardType="email-address"
value={this.state.email}
onChangeText={email => this.handleEmail(email)}
underlineColorAndroid='transparent'/>
并设置电子邮件如下
handleEmail = email => {
this.setState({
email: email
})
}
关于javascript - 类型错误 : TypeError: null is not an object (evaluating 'this.state.email' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54478493/