反应自动称为本机上

Question

我在反应新的OnPress功能方面遇到麻烦。只有在实际触发事件触发的情况下（我想），即当我按下屏幕上的按钮时，才应在启用触摸事件时起作用。但是，当调用渲染函数时，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函数在渲染发生后立即调用

to

onpress = {（）=> this.handleroute.bind（'x'）}//在这种情况下，handleroute在渲染发生后不会立即调用

Answer 2

您可以更改以下：

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

或以下：

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

原因是OnPress作为参数的函数。在您的代码中，您是在调用函数并立即返回结果（当调用渲染时）而不是引用 在新闻事件中进行react的函数。

您需要绑定（这）的原因是因为该函数在您（this.handleroute）时丢失了它是绑定的实例，并且您必须告诉它要使用的是 this 。绑定函数将其他参数稍后调用该函数。请参阅https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/functions/function/bind/bind有关bind。

的更多描述性信息。

还有另一种方法可以在构造函数中绑定。您可以在此处阅读有关此操作的方法：https：//facebook.github.io/react/docs/handling-events.html

Answer 3

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

或使用此：

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

Answer 4

更改

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

to

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

否则，一旦调用渲染方法，该功能就会立即调用。

Answer 5

这种行为的原因是每个渲染，引用该函数。

因此，为了避免这种情况，请使用绑定函数或箭头函数来调用OnPress