Question

我正在使用React Native制作应用程序，我遇到了一个我不明白的问题。

事实上，当我按下列表中的按钮时，与此按钮相关的onPress属性不会调用我的功能。

_onPressButton=() => {
   Alert.alert("Lol");
}

_renderRow (rowData, sectionID) {
return (
  <TouchableOpacity style={styles.row} onPress={() => this._onPressButton}>
    <Text style={styles.boldLabel}>{rowData.name}</Text>
    <Text style={styles.label}>{rowData.art}</Text>
  </TouchableOpacity>
)
}

这两个函数在我的类中，在render（）之外。有渲染：

render () {
return (
  <View style={styles.container}>
    <ListView
      renderSectionHeader={this._renderHeader}
      contentContainerStyle={styles.listContent}
      dataSource={this.state.dataSource}
      renderRow={this._renderRow}
      renderFooter={this._renderFooter}
      enableEmptySections
      pageSize={15}
    />
  </View>
  )
 }
}

所以当我按下按钮时，没有任何反应：/。有人有想法吗？谢谢阅读！

Answer 1

您尚未调用_onPressButton函数。您可以在onPress处理程序上传递此函数，而无需使用箭头函数，如下所示：

 onPress={this._onPressButton}

如果要传递任何参数，则可以将其包裹在箭头函数周围。

onPress={() => {this._onPressButton('someParams')}}

P.S您当前的代码调用onPress处理程序，但不调用_onPressButton函数

 onPress={() => {this._onPressButton}} // _onPressButton is not invoked 
 you have to invoke it as:

 {() => {this._onPressButton()}}

Answer 2

我认为正确的方法是同时拥有renderRow＆amp; onRowPress两个都绑定了像这样的构造函数：

  constructor (props) {
    super(props)

    this.renderRow = this.renderRow.bind(this)
    this.onRowPress = this.onRowPress.bind(this)

  }

然后在renderRow

  renderRow (rowData) {
    return (
      <TouchableOpacity onPress={() => this.onRowPress(rowData)} >

      </TouchableOpacity>
    )
  }

TouchableHighlight OnPress没有调用函数

2 个答案: