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

反应原生。在媒体上以可触摸的亮点失去了这种情况。

2 个答案: