eine Funktion in einer Zeile des Listview auszuführen Versuch

Question

ich eine LisView in meiner Komponente wie folgt haben:

class Test extends Component { 

    constructor(props) { 
    super(props); 

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     dataSource: ds.cloneWithRows(this.props.dataSource), 
    }; 
    } 

    componentWillReceiveProps(nextProps) { 
    if (this.props.dataSource !== nextProps.dataSource) { 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource), 
     }); 
    } 
    } 

    onPressRow(key) { 
    console.log(key); 
    } 

    getListView() { 
    if (this.props.isLoading) { 
     return (
     <ActivityIndicator 
      animating 
      size={'small'} 
      style={styles.spinner} 
      color={this.props.activityIndicatorColor} 
     /> 
    ); 
    } 
    return (
     <ListView 
     style={styles.listView} 
     keyboardShouldPersistTaps 
     keyboardDismissMode="on-drag" 
     enableEmptySections 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     automaticallyAdjustContentInsets={false} 
     /> 
    ); 
    } 

    renderRow(rowData) { 
    return (
     <View 
     style={styles.listButton} 
     > 
     <TouchableHighlight 
      style={styles.button} 
      onPress={() => this.onPressRow(rowData)} 
     > 
      <Text> 
      {rowData.description} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <View> 
     <View> 
      // TEXTINPUT 
     </View> 
     {this.getListView()} 
     </View> 
    ); 
    } 
} 

export default Test; 

Wenn ich auf eine Zeile klicken i eine Funktion ausführen wollen, aber ich habe diesen Fehler:

_this2.onPressRow is not a function

Warum kann ich die Funktion nicht lesen? Ich muss es als Requisiten übergeben?

Answer 1

Wenn Sie React.createClass verwenden, werden alle Anrufe automatisch gebunden, aber wenn Sie den ES6-Ansatz extends React.Component verwenden, müssen Sie alle Ihre Funktionen binden.

Sie können es entweder inline mit

renderRow={this.renderRow.bind(this)} 

Alternativ können Sie zu Ihrem Konstruktor hinzufügen, nach super():

this.renderRow = this.renderRow.bind(this); 

Ich persönlich mag diesen Ansatz als ich diesen Code ein bisschen einfacher finden lesen.

Weitere Informationen zur ES6-Methode finden Sie unter this link.