Reagieren Sie darauf, dass Native onPress automatisch aufgerufen wird

Ich habe Probleme mit der reaktionsnativen onPress-Funktion. Die onPress sollte nur funktionieren, wenn sie tatsächlich durch ein Berührungsereignis ausgelöst wurde (nehme ich an), dh wenn ich die Taste auf dem Bildschirm drücke. Es scheint jedoch, dass die onPress selbst ausgelöst wird, wenn die Renderfunktion aufgerufen wird. Wenn ich versuche, manuell zu drücken, funktioniert es nicht.

  import React, { Component } from 'react';
  import { PropTypes, Text, View ,Alert } from 'react-native';
  import { Button } from 'react-native-material-design';

export default class Home extends Component {
  
  render() {
    return (
          <View style={{flex:1}}>
            <Button value="Contacts" raised={true} onPress={this.handleRoute('x')} />
            <Button value="Contacts" raised={true} onPress={this.handleRoute('y')} />
            <Button value="Contacts" raised={true} onPress={this.handleRoute('z')} />
          </View>
          );
}
handleRoute(route){
  alert(route) // >> x , y, z 
    }
}

  module.exports = Home;

Was vermisse ich ? Stimmt etwas mit der Art und Weise, die ich zugewiesen habe, nicht oder ist dies ein Fehler? Jeder Vorschlag wird sehr geschätzt.

Video

Versuche zu ändern

onPress = {this.handleRoute ('x')} // In diesem Fall wird die Funktion handleRoute aufgerufen, sobald das Rendern erfolgt

zu

onPress = {() => this.handleRoute.bind ('x')} // In diesem Fall wird handleRoute nicht aufgerufen, sobald das Rendern erfolgt

Sie können dies ändern:

onPress={this.handleRoute.bind(this, 'x')}

oder dieses:

onPress={() => this.handleRoute('x')}

Der Grund ist, dass onPress eine Funktion als Argument übernimmt. In Ihrem Code rufen Sie die Funktion auf und geben das Ergebnis sofort zurück (wenn Render aufgerufen wird) und nicht auf die Funktion zu verweisen, die React später bei der Presseveranstaltung aufrufen soll.

Der Grund, warum Sie die Bindung (dies) benötigen, ist, dass die Funktion ihre gebundene Instanz verliert, wenn Sie dies nur tun (this.handleRoute), und Sie müssen ihr mitteilen, welche dies verwendet werden soll. Die Bindungsfunktion verwendet die anderen Argumente, um die Funktion später aufzurufen. SehenWeitere Informationen zum Binden finden https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind .

Es gibt eine andere Möglichkeit, wie Sie im Konstruktor binden können . Informationen dazu finden Sie in React hier: https://facebook.github.io/react/docs/handling-events.html

Veränderung

onPress={this.handleRoute('x')}

zu

onPress={()=>this.handleRoute('x')}

Andernfalls wird die Funktion aufgerufen, sobald die Rendermethode aufgerufen wird.

onPress={this.handleevent.bind(this, 'A')}

oder benutze dies:

onPress={() => this.handleevent('B')}

Der Grund für ein solches Verhalten liegt bei jedem Rendern, es wird ein Verweis auf die Funktion erstellt.

Um dies zu vermeiden, verwenden Sie die Bindefunktion ODER die Pfeilfunktion, um onPress aufzurufen