2016-01-26 15 views
8

Ich habe den folgenden Code:Reagieren nativen Zugriff this.prop von innen Funktion

module.exports = class Menu extends Component { 

    about() { 
     this.props.nav.push({ 
      component: TestView, 
      title: 'Test View', 
     }); 
    } 

    render() { 
     return (
      <ScrollView 
       scrollsToTop={false} 
       style={styles.menu} 
       navigator={this.props.nav}> 
       <View style={styles.logoContainer}> 
        <Image 
         style={styles.logo} 
         source={{ uri, }}/> 
       </View> 

       <Text onPress={this.about} style={styles.item}>About</Text> 
       <Text style={styles.item}>Account</Text> 
      </ScrollView> 
     ); 
    } 
}; 

ich die Fehlermeldung erhalte:

"undefined is not an object ("evaluating this.props.nav") 

wenn "onPress" ruft "this.about". Ich habe ein console.log innerhalb der Renderfunktion platziert und konnte sehen, dass this.props.nav einen Wert enthielt. Das Problem tritt in der Funktion about() auf und ich bin mir nicht sicher warum.

Irgendwelche Vorschläge wären großartig?

Dank

Antwort

18

ich nicht sicher sein kann, aber das sieht aus wie ein mir Javascript this Bindungsproblem. In ReactJS-Komponenten, die mit der ES6-Klassensyntax definiert sind, tun Sie not automatically bindthis, so dass Sie von Javascript rules that vary the value of this gebissen werden, je nachdem, wie eine Funktion aufgerufen wird.

Sie müssen explizit können .bind verwenden, wenn die Schaltfläche Handler Einstellung:

<Text onPress={this.about.bind(this)} style={styles.item}>About</Text> 

Damit this in der about() Funktion wird das gleiche wie die this in der render() Funktion, wo Sie den Handler einrichten.

Ich fand a repo, die andere Methoden zur Lösung des gleichen Problems, wie die Bindung in einem Konstruktor oder "Fat-arrow" functions für Ihren Handler zeigt.

Meine Erfahrung ist mit der Verwendung von React für das Web, und ich bin mir nicht sicher, ob React Native in diesem Bereich unterscheidet.

3

Sie können die Methodendeklaration auch selbst binden, so dass Sie nicht daran denken müssen, .bind(this) in Ihrem JSX aufzurufen. Dies ist nützlich, wenn Sie viele Tasten haben, die dieselbe Funktion aufrufen.

Zum Beispiel:

class Menu extends Component { 
    constructor(props) { 
     super(props); 
     // Replace instance method with a new 'bound' version 
     this.about = this.about.bind(this); 
    } 

// Elsewhere in JSX you don't need to remember to call .bind(this) 
<Text onPress={this.about} style={styles.item}>About</Text> 
Verwandte Themen