[英]Alert prompt to function not working in react native
I have a button on my page that prompts an alert. 我的页面上有一个按钮,提示警报。 If that user selects Yes
, I then want the exit()
function to run. 如果该用户选择Yes
,那么我希望exit()
函数运行。 However, the way it is coded now, for some reason nothing happens. 但是,现在的编码方式由于某种原因没有发生。
Does anyone know what I am doing wrong? 有人知道我在做什么错吗?
import React, { Component } from 'react';
import { ActivityIndicator, AsyncStorage, Button, StatusBar, Text, StyleSheet, View, TextInput, Alert } from 'react-native';
type Props = {};
export default class IDScreen extends Component<Props> {
static navigationOptions = {
title: 'Identification',
};
exit = async () => {
alert("I should see this but I don't");
await AsyncStorage.clear();
this.props.navigation.navigate('Login');
}
promptExit() {
Alert.alert("Are you sure?", "You can't be serious.", [
{text: 'Yes, Sign out', onPress: async () => this.exit },
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
],
{ cancelable: true });
}
render() {
return (
<View style={styles.container}>
<Text style={styles.footerText} onPress={this.promptExit}>Sign Out</Text>
</View>
);
}
}
Try This method it Will Work 试试这个方法会起作用
Invoke Alert.alert() function from Button, instead of calling Inside of another function, It will work, just see the code snippet. 从Button调用Alert.alert()函数,而不是在另一个函数内部调用,它将起作用,只需查看代码片段即可。 And exit is an arrow function invoke like this "this.exit()" instead of this.exit . 而exit是一个箭头函数,例如this.exit(),而不是this.exit 。
import React, { Component } from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
Text,
StyleSheet,
View,
TextInput,
Alert } from 'react-native';
type Props = {};
export default class IDScreen extends Component<Props> {
static navigationOptions = {
title: 'Identification',
};
exit = async () => {
alert("I should see this but I don't");
await AsyncStorage.clear();
this.props.navigation.navigate('Login');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.footerText}
onPress={
() => Alert.alert(
"Are you sure?", "You can't be serious.",
[
{text: 'Yes, Sign out', onPress: async () => this.exit() },
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'),
style: 'cancel'},
],
{ cancelable: true });
}
}>Sign Out</Text>
</View>
);
}
}
You need to modify promptExit()
to an arrow function promptExit = () =>
. 您需要将promptExit()
修改为箭头函数promptExit = () =>
。
Arrow functions are used, not to redefine the value of this
, inside their body, it simply means same thing within the function body as it does outside of it. 使用箭头函数不是在其主体内部重新定义this
的值 ,它只是表示函数主体内部与外部的含义相同。
Since the function is called without its reference to a particular object, like yourObj.yourMethod()
, therefore you either need to bind
it in the class constructor / render
or use arrow function
. 由于调用该函数时没有引用特定对象,例如yourObj.yourMethod()
,因此您需要bind
其bind
到class constructor / render
或使用arrow function
。
Without it , it would lose it's context and will always be undefined
or a global object
. 没有它,它将失去上下文,并且将始终是undefined
或global object
。
Similarly, you can also read 同样,您也可以阅读
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.