Question

我在使用react-native onPress功能时遇到问题。 onPress应该仅在触摸事件（我猜）实际触发时才有效，即当我按下屏幕上的按钮时。但是当调用render函数时，似乎onPress会被触发。当我尝试手动按下时，它不起作用。

  import React, { Component } from 'react';
  import { PropTypes, Text, View ,Alert } from 'react-native';
  import { Button } from 'react-native-material-design';

export default class Home extends Component {

  render() {
    return (
          <View style={{flex:1}}>
            <Button value="Contacts" raised={true} onPress={this.handleRoute('x')} />
            <Button value="Contacts" raised={true} onPress={this.handleRoute('y')} />
            <Button value="Contacts" raised={true} onPress={this.handleRoute('z')} />
          </View>
          );
}
handleRoute(route){
  alert(route) // >> x , y, z 
    }
}

  module.exports = Home;

我缺少什么？我分配的方式有什么问题，或者这是一些错误吗？任何建议都受到高度赞赏。

Video

Answer 1

尝试改变

onPress = {this.handleRoute（'x'）} //在这种情况下，只要渲染发生就调用handleRoute函数

到

onPress = {（）=＆gt; this.handleRoute.bind（'x'）} //在这种情况下，只要渲染发生就不会调用handleRoute

Answer 2

您可以更改为：

onPress={this.handleRoute.bind(this, 'x')}

或者这个：

onPress={() => this.handleRoute('x')}

原因是onPress将函数作为参数。在你的代码中，你正在调用函数并立即返回结果（当调用render时），而不是引用函数，以便稍后在新闻事件中调用React。

你需要bind（this）的原因是因为当你执行（this.handleRoute）时函数会丢失它的绑定实例，你必须告诉它使用哪个 this 。 bind函数稍后使用其他参数调用该函数。有关bind的更多描述性信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind。

还有另一种方法可以在构造函数中进行绑定。您可以在此处阅读React中处理此问题的方法：https://facebook.github.io/react/docs/handling-events.html

Answer 3

更改

onPress={this.handleRoute('x')}

到

onPress={()=>this.handleRoute('x')}

否则，该函数将在调用render方法后立即被调用。

Answer 4

onPress = {this.handleevent.bind（this，'A'）}

或：

onPress = {（）=> this.handleevent（'B'）}

Answer 5

这种行为的原因是在每个渲染上，都会创建对该函数的引用。

为避免这种情况，请使用bind函数或arrow函数调用onPress

React Native onPress被自动调用

5 个答案: