在 React Native 中与 this 绑定
Binding with this in React Native
_onPressButton =(username) =>{
// alert("bye")
this.props.navigation.navigator('Loc');
}
loginuser = (username, password) =>{
Parse.User.logIn(username, password, {
success: (user) => {
// Do stuff after successful login.
//
this._onPressButton(username);
alert("hello")
},
error: (user, error) => {
// The login failed. Check error to see why.
alert("Error: " + error.code + " " + error.message);
}
});
}
render(){
let { username } = this.state.username;
return(
<View style= {styles.container}>
<TextField
inputContainerStyle={{ justifyContent: 'center', marginTop:30,marginLeft:50, marginRight:50, }}
inputStyle={{textAlign: 'center',justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.5)'}}
titleTextStyle={{ textAlign: 'center',justifyContent: 'center', }}
label='Username'
value={this.state.username}
onChangeText={ (username) => this.setState({ username}) }
/>
<TextField
inputContainerStyle={{ justifyContent: 'center', marginTop:0,marginLeft:50, marginRight:50, }}
inputStyle={{textAlign: 'center',justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.5)'}}
titleTextStyle={{ textAlign: 'center',justifyContent: 'center', }}
label='Password'
secureTextEntry={true}
value={this.state.password}
onChangeText={ (password) => this.setState({ password}) }
/>
<View>
<TouchableOpacity
style={styles.loginScreenButton}
// onPress={() => this._onPressButton()}
onPress={() => this.loginuser(this.state.username, this.state.password)}
underlayColor='#fff'>
<Text
style={styles.loginText}> Login </Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Project = createStackNavigator({
Login: { screen: Login },
Loc: { screen: Loc}
});
更新
我可以使用箭头函数“=>”从函数 loginuser(username,password) 调用 _onPressButton(),但是 this.props.navigation.navigator('Loc') 不工作。
alert("bye") 工作正常但是 this.props.navigation.navigator('Loc');不执行。可能是因为绑定 'this' 。有人可以帮我吗?
P.S 'Loc' 只是另一个 class 呈现当前位置并打印它。
您可以对 class 方法和 success
/error
回调使用箭头函数来获取封闭执行上下文的 this
值。由于您不使用 await
,因此您也可以跳过 async
关键字。
loginuser = (username, password) => {
Parse.User.logIn(username, password, {
success: (user) => {
// Do stuff after successful login.
this._secondFunction();
},
error: (user, error) => {
// The login failed. Check error to see why.
alert("Error: " + error.code + " " + error.message);
}
});
};
_onPressButton =(username) =>{
// alert("bye")
this.props.navigation.navigator('Loc');
}
loginuser = (username, password) =>{
Parse.User.logIn(username, password, {
success: (user) => {
// Do stuff after successful login.
//
this._onPressButton(username);
alert("hello")
},
error: (user, error) => {
// The login failed. Check error to see why.
alert("Error: " + error.code + " " + error.message);
}
});
}
render(){
let { username } = this.state.username;
return(
<View style= {styles.container}>
<TextField
inputContainerStyle={{ justifyContent: 'center', marginTop:30,marginLeft:50, marginRight:50, }}
inputStyle={{textAlign: 'center',justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.5)'}}
titleTextStyle={{ textAlign: 'center',justifyContent: 'center', }}
label='Username'
value={this.state.username}
onChangeText={ (username) => this.setState({ username}) }
/>
<TextField
inputContainerStyle={{ justifyContent: 'center', marginTop:0,marginLeft:50, marginRight:50, }}
inputStyle={{textAlign: 'center',justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.5)'}}
titleTextStyle={{ textAlign: 'center',justifyContent: 'center', }}
label='Password'
secureTextEntry={true}
value={this.state.password}
onChangeText={ (password) => this.setState({ password}) }
/>
<View>
<TouchableOpacity
style={styles.loginScreenButton}
// onPress={() => this._onPressButton()}
onPress={() => this.loginuser(this.state.username, this.state.password)}
underlayColor='#fff'>
<Text
style={styles.loginText}> Login </Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Project = createStackNavigator({
Login: { screen: Login },
Loc: { screen: Loc}
});
更新
我可以使用箭头函数“=>”从函数 loginuser(username,password) 调用 _onPressButton(),但是 this.props.navigation.navigator('Loc') 不工作。 alert("bye") 工作正常但是 this.props.navigation.navigator('Loc');不执行。可能是因为绑定 'this' 。有人可以帮我吗?
P.S 'Loc' 只是另一个 class 呈现当前位置并打印它。
您可以对 class 方法和 success
/error
回调使用箭头函数来获取封闭执行上下文的 this
值。由于您不使用 await
,因此您也可以跳过 async
关键字。
loginuser = (username, password) => {
Parse.User.logIn(username, password, {
success: (user) => {
// Do stuff after successful login.
this._secondFunction();
},
error: (user, error) => {
// The login failed. Check error to see why.
alert("Error: " + error.code + " " + error.message);
}
});
};