reactjs - 单击 ListView React-Native 中的项目不起作用

Question

我是react-native新手，我想按到ListView中的特定项目，但是当我单击我想选择的项目时，我没有收到控制台日志消息，也没有收到任何错误所以我的代码如下所示:

在 renderRow 中我的代码如下所示:

renderRow(record) {
    return (
            <View style={styles.row}>
                <TouchableHighlight onPress={() => this._pressRow()}>
                    <View style={styles.info}>
                        <Text style={styles.items}>{record.nom}</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
}

和_pressRow函数简单控制台日志:

 _pressRow (rowID: number) {
        console.log("clicked");
    }

和渲染函数:

 render() {
        return (
            <ScrollView scrollsToTop={false} style={styles.menu}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                />
            </ScrollView>
        );
    }

我该如何解决这个问题，谢谢。

Answer 1

您是否使用 autobind-decorator ？按原样使用您的代码 _pressRow 方法不会被触发。当我添加自动绑定(bind)装饰器或将 _pressRow 更改为粗箭头函数时，console.log 对我有用:

import React, { Component } from 'react'
import { View, TouchableHighlight, Text, ScrollView, ListView } from 'react-native'

_pressRow = (rowID: number) => {
  console.log("clicked")
}

class App extends Component {
  constructor(props) {
    super(props)

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    })

    this.state = {
      dataSource: this.dataSource.cloneWithRows([
        { nom: 'a' },
        { nom: 'b' },
      ]),
    }
  }

  renderRow(record) {
    return (
      <View>
        <TouchableHighlight onPress={() => this._pressRow()}>
          <View>
            <Text>{record.nom}</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }

  render() {
    return (
      <ScrollView scrollsToTop={false}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </ScrollView>
    )
  }
}

export default App