React-Native ListView onPress - undefined不是对象

时间:2016-04-26 11:16:04

标签: 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不是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(...);
    }
 }

它的工作原理.....但我知道这不是正确的方法,我也不能为模态设置state。为什么不使用第一种方法?非常感谢。

1 个答案:

答案 0 :(得分:11)

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

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

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