本机的反应.在可触摸的高亮中丢失上下文

React native. losing context of this in touchable highlight on press.

本文关键字：上下文 高亮 本机 触摸      更新时间：2023-09-26

我试图在列表视图中添加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>
    );
  }
}

我也怀疑我真的不应该这样做，我的组件应该有不同的结构，所以它传递给新闻界处理程序作为一个道具。任何建议感谢。

可以全局声明另一个变量，如

var _this;

在渲染方法中初始化

render:function(){
 _this = this;
 return(
 ...
 )
}
并在touchablehighlight 中使用它
renderRow(chat){
return (
  <View>
    <TouchableHighlight onPress={ () => _this._handleChangePage(chat) }>
      <View>
         /* more content removed */
      </View>
    </TouchableHighlight>
  </View>
);

}

我建议阅读这篇有用的文章

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>
    );
  }
}
相关文章：