Reagieren Sie darauf, dass Native onPress automatisch aufgerufen wird

70

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

react-native-android

— Sijan Shrestha
quelle

Ich habe reagjs nur einmal berührt, aber ich denke, Sie rufen die Funktion auf, anstatt sie zuzuweisen.

— Chiffre

181

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

— Manjeet Singh
quelle

7

Irgendeine Idee, warum es dieses Verhalten gibt?

— Sijan Shrestha

2

nicht klar (ich möchte keine falschen Informationen liefern), werden Sie bald wissen lassen

— Manjeet Singh

3

Ich habe es verstanden, nachdem ich viel Zeit damit verbracht habe. Es ist sehr verwirrend, aber wenn Sie dies festlegen: onPress = {this.click (args)} bedeutet dies, dass Sie eine Funktion aufrufen und diese Funktion aufgerufen wurde, wenn render () aufgerufen wurde oder wenn die Schaltfläche / touchable erstellt wurde. Sie müssen also onPress = {() => this.function (args)} verwenden. Ist das klar?

— Marcus

In meinem Fall gibt es jedoch ein Verhalten der Funktionskomponenten, sodass dies oder beide nicht funktionieren. Bitte helfen Sie mir

— KuchenPHP

93

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

— bhelx
quelle

1

Ich war 2 Stunden lang dabei, da ich neu in React Native bin ... aber Ihre Antwort hat es in einer Minute gelöst. Vielen Dank

— Vaibhav

1

Vielen Dank für die genaue Antwort und Erklärung für einen React Native-Neuling!

— Quintin

2

Veränderung

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

zu

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

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

— Pumuckelo
quelle

2

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

oder benutze dies:

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

— Shivo'ham 0
quelle

0

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

— Kushal Desai
quelle