2016-10-20 16 views
0

私は何を間違っているのか分かりませんが、コンポーネント内にいくつかの機能があります。しかし、私は小道具としてそれらの機能の1つを渡すことができません、私はthis.nextSceneを受け取る関数ではありません。私は何を間違っているのか分かりません - 機能エラーではありません。

は、ここに私のコンポーネントからの抜粋だ、と私は問題を抱えていた場所をコメントしている:

nextScene() { 
    this.refs.navigator.push('browse'); 
    } 

    renderNavigationView() { 
    return (
     <View style={styles.drawer}> 
     <Touchable 
      onPress={this.nextScene()}  //issue here, "this.nextScene is not a function" 
     > 
      <View style={styles.container}> 
      <Text style={styles.title}>Browse</Text> 
      </View> 
     </Touchable> 
     <Touchable> 
      <View style={styles.container}> 
      <Text style={styles.title}>Button</Text> 
      </View> 
     </Touchable> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <DrawerLayoutAndroid 
     ref="drawer" 
     drawerWidth={300} 
     drawerPosition={DrawerLayoutAndroid.positions.Left} 
     renderNavigationView={this.renderNavigationView}> 
     <Navigator 
      ref="navigator" 
      configureScene={(route) => { 
      if (Platform.OS === 'android') { 
       return Navigator.SceneConfigs.FloatFromBottomAndroid; 
      } 
      } } 
      initialRoute={{}} 
      renderScene={this.renderScene} 
      /> 
     </DrawerLayoutAndroid> 
    ); 
    } 

ありがとう!

+0

私は、あなたが参照ではなく、呼び出しを渡したいと思います - 'this'はそれのウィンドウ – Li357

+0

こんにちはとして右のコンテキストではありませんので、また、あなたはこれを結合するか、または矢印機能を使用する必要があります。ですから、 'this.nextScene.bind(this)'を試してみると、 'undefined'の' property 'を読み込めません。 '( – user1354934

答えて

3

あなたがレンダリングされているコンポーネントを見てみましょう、とrenderNavigationView小道具にした場合:

renderNavigationView={this.renderNavigationView} 

それは細かいようだが、機能でthisコンテキストはデフォルトでwindowであることから、thisがでwindowを指し、 renderNavigationView。あなたがthis.nextScene()を使用しているので

onPress={this.nextScene()} 

thisは、あなたが効果的にこのようにエラーを投げて、存在しないwindow.nextSceneをやろうとしている、機能にwindowを参照:あなたのonPressイベントハンドラを考えてみましょう。 (呼び出しであることにも注意してください - 参照ではなく、カッコを削除してください)。


私はthis.nextScene.bind(this)を試すのであれば、私はwindow.nextSceneが存在しないため、関数が定義されていないので、これはあるcannot read property 'bind' of undefined

を取得します。この問題を解決するには、両方renderNavigationViewnextSceneに正しくthisをバインドするFunction.prototype.bindを使用します。

renderNavigationView={this.renderNavigationView.bind(this)} 

このような状況で何bind機能でthisコンテキストを設定されています。ここでthisがクラスを参照しているので、クラスは正しく動作するはずのnextSceneメソッドを実行するために使用されます。あなたはまた、我々はthisクラス、ないwindowを参照したいnextScenenextScene内部のためにバインドを使用する必要があります。

onPress={this.nextScene.bind(this)} 
+0

Wow!ありがとうございました! – user1354934

+0

@ user1354934いいえ問題はありません、歓声 –

1
冬は彼の答えで指摘bindメソッドを使用する別の方法は、矢印の機能を使用することです

自動的にthisを親コンテキストにバインドします。

class MyComponent extends React.Component { 
    clickHandler = (e) => { 
    // do stuff here 
    } 

    render() { 
    return (
     <button onClick={this.clickHandler}></button> 
    ) 
    } 
} 
+0

nice!ありがとうございます – user1354934

+0

Nit-pick:arrow関数は自動的に 'this'をバインドしません - バインドさえしません。彼らはそれを束縛しないので、「これ」は囲むコンテキストを指します。 – Li357

+0

うーん...私はそれについては分かりません。私はそれを見るつもりです。矢印関数はまだ関数なので、javascriptの仕組みは内部的には親のコンテキストにバインドする必要があります。バインドしなければ、通常の匿名関数を宣言するのと同じように動作しますあなたは明示的にそれを束縛していませんが、それはそれ自身のコンテキストであり、それは親ではありません。私はこれを見上げるつもりです。 –

関連する問題