Réagissez natif onPress étant appelé automatiquement

Question

J'ai de la difficulté à réagir indigènes onPress Fonctionnalité. Le onPress travailler uniquement quand il est déclenché par un événement tactile (je suppose) , c'est quand j'ai appuyer sur le bouton de l'écran. Mais il semble que le onPress se déclenche de lui-même lorsque le rendu de la fonction est appelée. Lorsque j'essaie de presse manuellement, ça ne fonctionne pas.

  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;

Ce qui me manque ? Est-il quelque chose de mal avec la façon dont je l'ai cédée ou c'est que certains bug ? Toute suggestion est très apprécié.

Vidéo

Answer 1

Essayer de changer

onPress = {this.handleRoute ('x')} // dans ce cas, la fonction handleRoute est appelée dès que le rendu a eu lieu

à

onPress = {() => this.handleRoute.bind ('x')} // dans ce cas, handleRoute n'est pas appelé dès que le rendu a eu lieu

Answer 2

Vous pouvez changer de:

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

ou ceci:

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

La raison en est que onPress prend une fonction en tant qu'argument. Dans votre code, vous appelez la fonction et renvoie le résultat immédiatement (lorsque le rendu est appelé) plutôt que le référencement , la fonction permettant de Réagir à l'appel plus tard sur la presse de l'événement.

La raison pour laquelle vous devez le lier(cet) c'est parce que la fonction perd c'est lié exemple, lorsque vous venez de faire (ce.handleRoute) et que vous avez à dire ce à utiliser. La fonction de liaison prend les autres arguments à faire appel à la fonction plus tard. Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind pour plus d'descriptive info sur lier.

Il y a une autre façon dont vous pouvez lier dans le constructeur. Vous pouvez lire sur les moyens de gérer cela à Réagir ici: https://facebook.github.io/react/docs/handling-events.html