ネイティブに反応します。プレスのタッチ可能なハイライトでこれの文脈を失う。

Question

TouchableHighlightコンポーネントをリストビューの行に追加しようとしています。

onPress関数は、以下のコードで未定義のエラーをスローしています。これはリストビューの外で動作します。

私はthisという文脈を失っているが、修正方法がわからないためと思われる。誰でも手伝うことができますか？

export default class ConversationsList extends Component { 
    constructor(props) { 
    super(props); 
    this._handleChangePage = this._handleChangePage.bind(this); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(Coversations.chats) 
    }; 
    } 

    _handleChangePage(chat) { 
    this.props.navigator.push({ 
     title: 'foo', 
     component: Chat, 
     passProps: { 
     chat: chat 
     } 
    }); 
    } 


    renderRow(chat){ 
    return (
     <View> 
     <TouchableHighlight onPress={() => this._handleChangePage.bind(this, chat) }> 
      <View> 
      /* more content removed */ 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
     /> 
     </View> 
    ); 
    } 
} 

はまた、私は本当に私のコンポーネントは異なる構造すべきであると、このようなことをやってすべきではないと思われるので、それはおそらく小道具としてプレスハンドラが渡されます。何かアドバイスをいただきました。

Answer 1

var _this; 

はそれがで私は方法

render:function(){ 
_this = this; 

return(
... 
) 
} 

をレンダリングし、あなたのtouchableHightlightに

renderRow(chat){ 
return (
    <View> 
    <TouchableHighlight onPress={() => _this._handleChangePage(chat) }> 
     <View> 
     /* more content removed */ 
     </View> 
    </TouchableHighlight> 
    </View> 
); 

}

Answer 2

をそれを使用する初期化のようにあなたが世界的に別の変数を宣言することができますこれを読むことをお勧めします。helpful article

export default class ConversationsList extends Component { 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(Coversations.chats) 
    }; 
    } 

    _handleChangePage =() => { 
    this.props.navigator.push({ 
     title: 'foo', 
     component: Chat, 
     passProps: { 
     chat: this 
     } 
    }); 
    } 


    renderRow = (chat) => { 
    return (
     <View> 
     <TouchableHighlight onPress={ this._handleChangePage }> 
      <View> 
      /* more content removed */ 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
     /> 
     </View> 
    ); 
    } 
}