リアクションネイティブのonPressが自動的に呼び出されます

Question

リアクションのネイティブのonPressの機能に問題があります。 onPressは、実際にタッチイベント（私が想定している）によってトリガされたとき、つまり画面上のボタンを押したときにのみ動作します。しかし、それはレンダリング関数が呼び出されたときに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

Answer 1

たonPress = {this.handleRoute（ 'X'）} //この場合handleRoute関数は、すぐ

起こるレンダリングと呼ばれる変更しようとします〜

onPress = {（）=> this.handleRoute.bind（ 'x'）} //この場合handleRoute d理由はたonPressが引数として関数を取ることである

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

：

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

またはこの：oesn'tとすぐにあなたがこれに変更することができ

Answer 2

が起こるのレンダリングと呼ばれます。あなたのコードでは、ではなくを返す関数を呼び出すとすぐに結果が返されます（レンダリングが呼び出されたとき）。

（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