React Native onPress被自动调用

70

我在使用react-native onPress Feature时遇到麻烦。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;

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

视频

react-native-android

— 西扬·史瑞莎（Sijan Shrestha）
source

我只碰过一次reactjs，但我认为您是在调用函数而不是对其进行分配。

— 密码

181

尝试改变

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

至

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

— 曼吉特·辛格（Manjeet Singh）
source

7

知道为什么会有这种行为吗？

— Sijan Shrestha

2

不清楚（我不想提供虚假信息），很快就会通知您

— Manjeet Singh

3

我花了很多时间才明白。这非常混乱，但是当您设置此参数时：onPress = {this.click（args）}意味着您正在调用一个函数，并且在调用render（）或创建按钮/可触摸对象时调用了此函数。因此，您需要使用onPress = {（）=> this.function（args）}。清楚吗？

— Marcus

但就我而言，存在函数组件行为，因此这两个或绑定都无法正常工作。请协助我

— cakePHP

93

您可以更改为：

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

或这个：

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

原因是onPress将函数作为参数。在代码中，您正在调用该函数并立即返回结果（在调用render时），而不是引用该函数供React在以后的press事件中调用。

究其原因，你需要的绑定（这）是由于功能丧失它必将例如，当你只是做（this.handleRoute），你必须告诉它这个使用。bind函数使用其他参数稍后再调用该函数。有关绑定的更多描述性信息，请参见https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind。

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

— 百利
source

1

当我在React Native中刚接触时，我被困了2个小时...但是您的答案很快就解决了。非常感谢

— Vaibhav

1

非常感谢React Native新手的准确答案和解释！

— 昆丁

2

更改

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

至

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

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

— 普马基洛
source

2

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

或使用此：

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

— Shivo'ham 0
source

0

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

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

— 库萨尔·德赛
source