警报提示功能在本机react中不起作用

IT技术 javascript reactjs react-native
2021-05-17 20:24:43

我的页面上有一个按钮提示警报。如果该用户选择Yes,则我希望该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');
  }

  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>

    );
  }

}
2个回答

试试这个方法会奏效

从 Button 调用 Alert.alert() 函数,而不是在另一个函数内部调用,它会起作用,只需查看代码片段即可。 出口是这样的一个箭头函数调用“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>

    );
  }

}

您需要修改 promptExit() 为箭头函数promptExit = () =>

使用箭头函数,不是this在它们的体内重新定义 , 的值,它只是在函数体内与在函数体外的含义相同。

由于调用函数时不其引用到一个特定的对象,像yourObj.yourMethod(),因此您可能需要bind它在class constructor / render或使用arrow function

没有它,它将失去它的上下文并且将始终是undefinedglobal object

同样,你也可以阅读

何时不使用箭头函数