React-Native ListView onPress - 未定义不是对象

Question

我似乎被按钮按下时的调用功能困住了。无论我尝试什么方法，我都会得到不同的未定义错误。

我正在运行 react native 0.24，目前仅针对 Android 设备进行编码。

请看下面的代码:

class ListPage extends Component {

   constructor(props){
   super(props);
       this.nav = props.nav;
       this.route = props.route;
       this.ds = new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
       });
       this.state = ({
           visible: false,
           dataSource: this.ds.cloneWithRows(props.fullList),
       });
  }

  goToPage(name){
      this.nav.push({ name: name });
  }

  loadModal() {
      this.setState({ visible: true });
  }

    list(row){
        return (
             <View style={styles.box}>
                  <TouchableNativeFeedback underlayColor="#FFF" 
                    onPress={this.goToPage.bind(this,'ShowRow')}>
                      <View>
                          ...ShowRow Button
                      </View>
                   </TouchableNativeFeedback>
                   <TouchableNativeFeedback
                      onPress={this.loadModal.bind(this)} >
                        <View style={styles.button}>
                            ...Modal Button
                        </View>
                   </TouchableNativeFeedback>
              </View>
          );
    }

    render(){
        return (
             <View style={styles.container}>
                <Modal visible={this.state.visible}
                  onRequestClose={() => {this.setState({visible: false}) }} >
                    <View>
                        <Text>I am a Modal!</Text>
                    </View>
                </Modal>
                <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this.list} />
             </View>
        );
    }
}

每当我按下任一按钮时，我都会得到 undefined is not an object error for this.goToPage.bind 和 this.loadModal.bind 。

如果我试试这个:

render() { //or inside list(row) function
    goToPage = function(name){
       this.nav.push etc etc
    }
    loadModal = function() { setState etc... }
    return (
        ...render stuff
    )
}

它现在说 undefined 不是 this.nav 和 this.setState 的对象

但如果我这样做:

 constructor() {
    ...
    goToPage = function(name){
        props.nav.push(...);
    }
 }

它工作......但我知道这不是正确的方法，我也不能为模态设置状态。为什么它不适用于第一种方法？非常感谢。

Answer 1

好的，找到了解决方案。在 renderRow 中，我需要像这样绑定(bind)函数:

<ListView dataSource={this.state.dataSource}
renderRow={this.list.bind(this)} />

现在我可以用第一种方法调用函数。