自动响应本机onPress

Question

我有问题的反应-本机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;

我错过了什么？我分配的方式有什么问题吗?还是这是个错误？任何建议都是非常感谢的。

视频

Answer 1

试着改变

onPress={this.handleRoute('x')} //在本例中，在呈现发生时立即调用handleRoute函数

至

onPress={() => this.handleRoute.bind('x')} //在本例中，handleRoute不会在呈现发生时立即调用

Answer 2

您可以更改为：

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

或者这个：

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

原因是onPress将一个函数作为参数。在您的代码中，您正在调用该函数并立即返回结果(在调用render时)，而不是引用该函数以便在稍后的新闻事件中进行调用。

您需要绑定(这个)的原因是，当您只是做(this.handleRoute)时，函数会丢失它的绑定实例，并且您必须告诉它使用哪个绑定实例。之后，绑定函数将使用其他参数来调用该函数。有关绑定的更多描述性信息，请参见对象/函数/绑定。

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

Answer 3

onPress={this.handleevent.bind(this, 'A')}

或者用这个：

onPress={() => this.handleevent('B')}