React Native onPress jest automatycznie wywoływany

Question

Mam problem z funkcją natywnego reagowania onPress. Urządzenie onPress powinno działać tylko wtedy, gdy zostało faktycznie wyzwolone przez zdarzenie dotykowe (tak przypuszczam), to znaczy, gdy naciśnięto przycisk na ekranie. Wygląda jednak na to, że onPress uruchamia się sam, gdy wywoływana jest funkcja render. Kiedy próbuję nacisnąć ręcznie, nie działa.

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; 

Czego mi brakuje? Czy coś jest nie tak ze sposobem, w jaki je przypisałem, czy też jest to jakiś błąd? Każda sugestia jest bardzo ceniona.

Video

Answer 1

Spróbuj zmienić

onPress = {this.handleRoute ('x')} // w tym przypadku funkcja handleRoute nazywa się tak szybko jak to czynią zdarzyć

to

onPress = {() => this.handleRoute.ind. ('x')} // w tym przypadku handleRoute d oesn't nazywane tak szybko jak to czynią zdarzyć

Answer 2

Można zmienić to:

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

lub to:

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

Powodem jest to, że onPress wykonuje funkcję jako argument. W twoim kodzie wywołujesz funkcję i zwracasz wynik natychmiast (gdy wywoływany jest render) zamiast zwracając funkcję React do wywoływania później w zdarzeniu prasowym.

Powodem, dla którego potrzebujesz powiązania (tego), jest to, że funkcja traci związane wystąpienie, gdy właśnie robisz (this.handleRoute) i musisz powiedzieć, którego użyć. Funkcja bind pobiera inne argumenty, aby wywołać tę funkcję później. Zobacz https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind, aby uzyskać więcej opisowych informacji o bind.

Istnieje inny sposób, w jaki można wiązać w konstruktorze . Możesz przeczytać o tym, jak sobie z tym poradzić w React: https://facebook.github.io/react/docs/handling-events.html