Question

我有一个带有Welcome类的简单应用程序，该类可重定向到Select类。选择班级有2个按钮。

我的问题是，当我重定向到“选择”类别时，按钮会自动单击，并且我会触发警报，而无需单击。

您知道如何预防吗？

//Select.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image,ImageBackground, Linking, TouchableOpacity, Alert, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation"

export default class Select extends React.Component {

  displayMessage1(){
    Alert.alert("hello1")
  }

  displayMessage2(){
    Alert.alert("hello2")
  }

  render() {
    return (
        <View>
          <ImageBackground
              source={require("./images/im1.jpg")}
              style={styles.imageBackground}>

                <View style ={{flex:0.3}}></View>

                <View style ={{flex:1}}>
                    <Text style ={styles.text}> myText</Text>
                </View>

                <Button
                  onPress={this.displayMessage1()}
                  title="go message 1"
                  color="#00aaf0"
                />

                <View style ={{flex:0.3}}></View>

                <Button
                  onPress={this.displayMessage2()}
                  title="go message 2"
                  color="#00aaf0"
                />

                <View style ={{flex:1}}></View>

          </ImageBackground>
        </View>
    )
  }
}
```

Answer 1

<Button
  onPress={this.displayMessage1()} // <-- here
  title="go message 1"
  color="#00aaf0"
/>

这是原因，而不是传递对onPress属性的引用，您实际上是在执行该方法，因此在每次调用该方法时都会调用该方法。

Answer 2

您正在通过按钮的onClick方法执行displayMessage1消息。

您应该执行类似的操作，以便在触发事件时，将调用绑定到您的类的方法。

<Button
    onPress={this.displayMessage1.bind(this)}
    title="go message 1"
    color="#00aaf0"
    />

按钮自动点击

2 个答案: