Question

我在index.js我的反应原生项目中有一个列表视图，如下所示。

import ResultRow from './resultRow'

class ResultList extends Component {
    constructor() {

    }

    updateDate(){
        //Some operation
    }

    onPressRow() {
        try {
          console.log("Selected!");

        //Some operation

          this.updateDate(); // Got undefined is not a function

        } catch (error) {      
          console.error(error);
        }
    }

    renderRow(rowData) {
        return (
          <ResultRow
          onPress={this.onPressRow}
            {...rowData} />
        )
      }

    render() {
      return (
              <ListView
                style={[styles.container, { padding: 10, backgroundColor: '#ddd' }]}
                dataSource={this.state.dataSource}
                renderRow={this.renderRow.bind(this)} />
            );
    }

}

使用此模板在resultRow.js文件中绑定列表项，如下所示。

import React from 'react';
import { TouchableHighlight, StyleSheet, Image,View } from 'react-native';

const ResultRow = (props) => (
  <TouchableHighlight onPress={() => props.onPress()}>
    <View>
      <Text>My Row</Text>       
    </View>
  </TouchableHighlight >
);

export default ResultRow;

如果我从列表视图中选择一行onPress事件被调用。并执行onPressRow函数。从onPressRow函数我调用另一个函数，该函数在名为＆＃34; updateDate＆＃34;的同一个类中定义。我这样称呼this.updateDate();但得到了undefined is not a function error。

我做错了什么？

提前致谢。

Answer 1

您需要bind函数，因为this没有引用代码中的相应上下文。您可以使用箭头功能

onPressRow = () => {
        try {
          console.log("Selected!");

        //Some operation

          this.updateDate(); 

        } catch (error) {      
          console.error(error);
        }
   }

绑定函数的另一种方法是在构造函数

中设置绑定

constructor() {
   super();
   this.onPressRow = this.onPressRow.bind(this);
}

实际上，您需要bind任何能够使用this来引用您的反应类的context的函数。

如何从导入的元素访问父函数

1 个答案: