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

【问题标题】：Click Item in ListView React-Native not working单击 ListView React-Native 中的项目不起作用
【发布时间】：2018-04-01 12:53:39
【问题描述】：

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

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

【问题讨论】：

我认为你必须在组件的构造函数中绑定该函数：this._ pressRow = this._ pressRow.bind(this)

标签： reactjs react-native

【解决方案1】：

您使用的是autobind-decorator 吗？不会触发 _pressRow 方法按原样使用您的代码。当我添加自动绑定装饰器或将 _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

【讨论】：

【解决方案2】：

如果您的函数在您的类中，请将 this._pressRow() 更改为 this._pressRow.bind(this)

【讨论】：

【解决方案3】：

我使用TouchableHighlight 来包装“不可压”组件（伴随着将this._pressRow 更改为this._pressRow.bind(this)）。

此外，某些组件（例如 Text 组件）没有填满ListView 行的所有空间。因此，onPress 仅在您在文本上按右时才有效（如果您在没有任何文本的行位置上按，它不起作用）。所以用TouchableHighlight 组件包装很有用。

【讨论】：