Wie richtig in react-native binden?

Question

Ich versuche, den Status von einer Funktion zu aktualisieren, aber ich finde nicht die richtige Form, um den Bereich zu binden. Mein Code (Ich arbeite mit nativen Basiskomponenten):

export default class MenuScreen extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    _renderRow() { 
    return (
     <ListItem avatar onPress={() => 
     ActionSheet.show(
      {options: BUTTONS 
      }, buttonIndex => { setState({ clicked: BUTTONS[buttonIndex]})} 
     )} 
     > 
     </ListItem> 
    ); 
    } 

    render() { 
    return (
     <SectionList 
      sections={[...]} 
      renderItem={this._renderRow} 
     /> 
    ); 
    } 

Voran vielen Dank.

Answer 1

Erste Option, binden sie in Konstruktor

Beispiel

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

Zweite Option, binden sie inline

Beispiel

 <SectionList 
     sections={[...]} 
     renderItem={this._renderRow.bind(this)} 
    /> 

Th ird Option, mit den Pfeil Funktionen

Beispiel

renderRow =() => { 
    return (
     <ListItem avatar onPress={() => 
     ActionSheet.show(
      {options: BUTTONS 
      }, buttonIndex => { this.setState({ clicked: BUTTONS[buttonIndex]})} 
     )} 
     > 
     </ListItem> 
    ); 
    } 

Answer 2

Meine Empfehlung, dies zu lesen wäre: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 viel mit Verständnis hilft Optionen Bindung Sie haben und warum die eine oder andere könnte besser sein, in Ihrem Fall.

ich mit Bindung in constructor gehen vorschlagen:

export default class MenuScreen extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.handleChange = this.handlePress.bind(this); 
    } 
... 

Answer 3

Selbst mentale Notiz, „Bind dummy ist, wenn ich nicht den Kontext der Funktion“

export default class MenuScreen extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    **this._renderRow = this._renderRow.bind(this);** 
    } 

    _renderRow() { 
    return (
     <ListItem avatar onPress={() => 
     ActionSheet.show(
      {options: BUTTONS 
      }, buttonIndex => { **this.**setState({ clicked: BUTTONS[buttonIndex]})} 
     )} 
     > 
     </ListItem> 
    ); 
    } 

    render() { 
    return (
     <SectionList 
      sections={[...]} 
      renderItem={this._renderRow} 
     /> 
    ); 
    }