React Native onPress被自动调用

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;

我错过了什么？我分配的方式有什么问题,或者这是一些错误吗？任何建议都非常感谢.

视频

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时),而不是引用 React函数以便稍后调用press事件.

究其原因,你需要的绑定(这)是由于功能丧失它必将例如,当你只是做(this.handleRoute),你必须告诉它这个使用.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.handleevent.bind(this, 'A')}

或使用这个：

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