ReactNative Fehler onPress

Question

auf den Text klicken, erhalte ich eine Fehlermeldung, "nicht definiert ist kein Objekt (Bewertung '_this2.categoryClicked.bind')"

Ich denke, der Fehler „onPress = {() => this.categoryClicked.bind (this)} "Es muss eine andere Möglichkeit geben, die categoryClicked-Funktion aufzurufen, wenn auf die Schaltfläche geklickt wird. Was ist falsch in meinem Code?

class CategoriesView extends React.Component { 
    constructor(props){ 
    super(props) 
    } 

categoryClicked(){ 
    this.props.categoryPressed(this.props.Category); 
} 

renderSubCategory(){ 
    return(
     this.props.Category.sub_category.map(function(subCategory, i){ 
      return(
       <View style={styles.abcd}> 
        <TouchableHighlight onPress={()=>this.categoryClicked.bind(this)}> 
         <Text>{subCategory.title}</Text> 
        </TouchableHighlight> 
       </View> 
      ) 
     }) 
    ) 
} 

render(){ 
    return(
     <View style={{flex:1}}> 
      <View style={styles.avf}> 
       <Text>{this.props.Category.heading}</Text> 
      </View> 
      <View style={styles.ddd}> 
       {this.renderSubCategory()} 
      </View> 
     </View> 
    ) 
} 
} 

Answer 1

Ich zugänglich sein glauben Sie, was zu tun ist onPress={this.categoryClicked.bind(this)} statt ein Pfeil Funktion. .bind(this) gibt eine Funktion mit dem korrekt an this gebundenen Kontext zurück, daher wird es nicht aufgerufen.

Auch ich schlage vor, die Bindung in Konstruktor setzen, wie Sie die Bindung nicht jedes Mal auftreten möchten, die die Komponente neu rendert. z.B.

constructor(props) { 
    super(props); 
    this.categoryClicked = this.categoryClicked.bind(this); 
} 

Dann benutzen Sie einfach onPress={this.categoryClicked}

Wenn Sie unten sub-category übergeben möchten, können Sie wie folgt tun können

constructor(props) { 
    super(props); 

    this.subcategoryClicked = props.Category.sub_categories.map(sub_category => this.categoryClicked.bind(this, sub_category)); 
} 

dann render im Einsatz:

this.props.Category.sub_category.map(function(subCategory, i) { 
    <View style={styles.abcd}> 
    <TouchableHighlight onPress={this.subcategoryClicked[i]}> 
     <Text>{subCategory.title}</Text> 
    </TouchableHighlight> 
    </View> 

PS, I Ich bin mir nicht sicher, ob dies ein gutes Muster ist, dem ich folgen kann. Bleiben Sie bei this.categoryClicked(bind, subcategory), wenn Sie nicht damit zufrieden sind. Dies ist eines der Dinge, bei denen ich nicht sicher bin, ob sich die Optimierung lohnt.

Answer 2

Dies in onPress={()=>this.categoryClicked.bind(this)}> zeigt auf sub_category.map Funktion. Es sollte stattdessen auf die Klasse zeigen. Können auf diese Weise

return (
    this.props.Category.sub_category.map((subCategory, i) => { // <--- this way context is preserved 
    // other lines 
    onPress={()=>this.categoryClicked.bind(this, subCategory)}> 
    // other lines 
    }) 
); 

in categoryClicked Methode stattdessen getan werden sollte

categoryClicked(category){ 
    this.props.categoryPressed(category); 
}