这是一个简单的注册页面,其中包含用户名,电子邮件,电话号码,密码和重复密码。问题出在重复输入密码。该输入应该在文本更改时触发verifyRePassword(就像其他所有输入及其各自的功能一样)。尽管其他输入触发它们的功能没有问题,但是重复密码似乎不会在文本更改时触发其功能(verifyRePassword)。
我尝试用其他功能切换每个输入,而其他输入似乎可以触发功能verifyRePassword。
//FUNCTIONS
verifyPassword = (text) => {
this.setState({password:text})
console.log("verifyPassword Called");
let reg = /\w{6,}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgPassword: "Password must be longer than 6 characters"})
this.setState({password:text})
}
else {
this.setState({errMsgPassword: ""})
this.setState({password:text})
}
}
verifyRePassword = (text) => {
this.setState({repassword: text})
console.log("verifyRePassword Called !!!");
const passStr = toString(this.state.password)
const repassStr = toString(this.state.repassword)
if (passStr === repassStr) {
this.setState({
errMsgRePassword: ""
})
}
else{
this.setState({
errMsgRePassword: "Password must match."
})
}
}
//INPUT
<Text style={stsh.textError}>{this.state.errMsgPhonenum}</Text>
<Text style={stsh.text1}>Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyPassword}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgPassword}</Text>
<Text style={stsh.text1}>Repeat Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyRePassword.bind(this)}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgRePassword}</Text>
由于两者的结构相似,因此两者都可以正常工作。密码有效,但不能重复密码。
* edit:代码中还有一些内容
//CONSTRUCTOR
constructor(){
super()
this.state = {
username: "",
emailadd: "",
phonenum: "",
password: "",
repassword: ""
}
this.verifyUsername = this.verifyUsername.bind(this)
this.verifyEmailadd = this.verifyEmailadd.bind(this)
this.verifyPhonenum = this.verifyPhonenum.bind(this)
this.verifyPassword = this.verifyPassword.bind(this)
}
//COMPLETE FUNCTIONS
verifyUsername = (text) => {
this.setState({username:text})
console.log(text);
let reg = /\w{5,30}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgUsername: "Username must contain 5 to 30 characters"})
this.setState({username:text})
return false;
}
else {
this.setState({errMsgUsername: ""})
this.setState({username:text})
}
}
verifyEmailadd = (text) => {
this.setState({emailadd:text})
console.log(text);
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(reg.test(text) === false)
{
this.setState({errMsgEmailadd: "Enter a valid email address"})
this.setState({emailadd:text})
return false;
}
else {
this.setState({emailadd:text})
this.setState({errMsgEmailadd: ""})
}
}
verifyPhonenum = (text) => {
this.setState({phonenum:text})
console.log(text);
let reg = /\d{10,11}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgPhonenum: "Phone number must be 10 to 11 characters long consisting only of digits"})
this.setState({phonenum:text})
return false;
}
else {
this.setState({errMsgPhonenum: ""})
this.setState({phonenum:text})
}
}
verifyPassword = (text) => {
this.setState({password:text})
console.log("verifyPassword Called");
let reg = /\w{6,}/ ;
if(reg.test(text) === false)
{
this.setState({errMsgPassword: "Password must be longer than 6 characters"})
this.setState({password:text})
}
else {
this.setState({errMsgPassword: ""})
this.setState({password:text})
}
}
verifyRePassword = (text) => {
this.setState({repassword: text})
console.log("verifyRePassword Called !!!");
const passStr = toString(this.state.password)
const repassStr = toString(this.state.repassword)
if (passStr === repassStr) {
this.setState({
errMsgRePassword: ""
})
}
else{
this.setState({
errMsgRePassword: "Password must match."
})
}
}
//COMPLETE RENDER
render() {
return (
<View style={{flex: 1}}>
<SafeAreaView>
<ScrollView style={stsh.container}>
<Text style={{fontSize:40, fontWeight: "bold", borderBottomWidth: 2, color: "#515151", borderColor: "#515151"}}>Sign Up</Text>
<Text style={{color: "#515151",fontSize: 20,fontWeight: "bold",paddingTop: 60}}>Username</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyUsername}
maxLength={30}
t
/>
<Text style={stsh.textError}>{this.state.errMsgUsername}</Text>
<Text style={stsh.text1}>Email</Text>
<TextInput style={stsh.text2}
value={this.state.email}
onChangeText={this.verifyEmailadd.bind(this)}
/>
<Text style={stsh.textError}>{this.state.errMsgEmailadd}</Text>
<Text style={stsh.text1}>Phone number</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyPhonenum}
maxLength={11}
/>
<Text style={stsh.textError}>{this.state.errMsgPhonenum}</Text>
<Text style={stsh.text1}>Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyPassword}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgPassword}</Text>
<Text style={stsh.text1}>Repeat Password</Text>
<TextInput style={stsh.text2}
onChangeText={this.verifyRePassword}
secureTextEntry={true}
/>
<Text style={stsh.textError}>Error {this.state.errMsgRePassword}</Text>
<Text style={{paddingBottom: 50}}></Text>
<Button color='#515151'
onPress={this.submitRegister}
type="outline"
title="Sign Up"
titleStyle={{paddingVertical: 10, fontSize: 30, fontWeight: "bold", color: "#515151"}}
buttonStyle={{borderColor:"#515151", borderWidth: 10, borderRadius: 20}}
/>
<Text style={{paddingBottom: 100}}></Text>
</ScrollView>
</SafeAreaView>
</View>
);
}
}
答案 0 :(得分:0)
我已经重写了您的verifyRePassword函数(我删除了“ toString()”,因为我看不到为什么需要它),请尝试以下代码:
verifyRePassword = (text) => {
console.log("verifyRePassword Called !!!", text);
this.setState(()=>{
return {repassword: text};
}, ()=>{
const {password, repassword} = this.state;
this.setState({
errMsgRePassword: password === repassword? "" : "Password must match.",
});
});
}
比较值的问题在于:在setState更改重密码的值之前,实际上存在一个时间间隔。意思是;当行
const repassStr = toString(this.state.repassword)
运行,它实际上获得“ repassword”的先前值。因此,您应使用setState的回调,如上所示。