React Native onPress被自动调用

我在使用react-native onPress功能时遇到问题。 onPress应该只在触摸事件触发事件时发挥作用（我想），那就是当我按下屏幕上的按钮时。但是，在调用渲染函数时，似乎onPress会触发自己。当我尝试手动按下时，它不起作用。React Native 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

来源

2017-02-19 Sijan Shrestha

我只碰过reactjs一次，但我认为你调用的是函数而不是分配它。 – cipher

尝试改变

onPress = {this.handleRoute（ 'X'）} //在这种情况下handleRoute功能，一旦发生渲染所谓

到

onPress = {（）=> this.handleRoute.bind（'x'）} //在这种情况下handleRoute d oesn't尽快称为渲染发生

来源

2017-02-19 17:14:15

关于为什么会有这种行为的任何想法？ –

不清楚（我不想提供虚假信息），会很快让你知道 –

可以改成这样：

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

或本：

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

的原因是onPress取一个函数作为参数。在你的代码中，你正在调用函数并立即返回结果（当调用render时），而不是返回函数React稍后调用press事件。

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

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

来源

2017-04-06 19:36:29 bhelx

更清晰有用，那么我的回答 –

很好的解释，谢谢。 –

React Native onPress被自动调用

回答

相关问题