React Native onPress вызывается автоматически

У меня возникают проблемы с функцией onPress. OnPress должен работать только тогда, когда он фактически был вызван сенсорным событием (я полагаю), то есть когда я нажимаю кнопку на экране. Но кажется, что onPress запускается сам при вызове функции render. Когда я пытаюсь нажать вручную, это не сработает.

  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;

Что мне не хватает? Что-то не так с тем, как я назначил, или это какая-то ошибка? Любое предложение высоко ценится.

Видео

Ответ 1

попытайтесь изменить

onPress = {this.handleRoute('x')}//в этом случае функция handleRoute вызывается, как только выполняется рендеринг

onPress = {() = > this.handleRoute.bind('x')}//в этом случае handleRoute не вызывается, как только выполняется рендеринг

Ответ 2

Вы можете изменить это:

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

или это:

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

Причина в том, что onPress принимает функцию в качестве аргумента. В вашем коде вы вызываете функцию и сразу же возвращаете результат (когда вызывается render), а не ссылаетесь на функцию, которую React вызывает позже в событии press.

Причина, по которой вам нужно связывание (this), заключается в том, что функция теряет привязанный экземпляр, когда вы просто делаете (this.handleRoute), и вы должны указать ему, какой это использовать. Функция 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

Ответ 3

На самом деле я объявил свою функцию выше render, а затем из этой функции я вызывал функцию, которая была объявлена внутри функции render(), и она показала, что функции внутри render не существует... Может кто-нибудь помочь мне