2016-04-26 21 views
2

ボタンを押すと関数が呼び出されているようです。どのような方法を試しても、私は別の未定義のエラーが出ます。React-Native ListView onPress - 未定義はオブジェクトではありません

私は反応ネイティブ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> 
     ); 
    } 
} 

は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 
    ) 
} 

を、それが今、未定義のthis.navとthis.setState

両方のためのオブジェクトではありませんが、私はこれを行う場合は言う:

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

それは動作.....しかし、私はこれが正しいアプローチではないと私はモーダルのための状態を設定することはできません知っている。最初の方法ではうまくいかないのはなぜですか?どうもありがとう。

答えて

10

解決策を見つけました。 renderRowでは、私はこのように関数をバインドする必要がありました:

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

私は最初の方法で関数を呼び出すことができます。

関連する問題