呼び出すメソッドは定義されていません

Question

handleButtonPress機能は何のパラメータは必要ありません次の例では動作します

...

import React, { Component } from 'react'; 
import {View, Text, TouchableOpacity} from 'react-native'; 

export default class MyComponent extends Component { 
    constructor(props){ 
    super(props) 
    this.state = {message:"HELLO"} 
    this.myFunc = this.myFunc.bind(this) 
    this.handleButtonPress = this.handleButtonPress.bind(this) 
    } 

    render(){ 
    return (
     <View> 
     <Text>{this.state.message}</Text> 
     <TouchableOpacity onPress={this.handleButtonPress}> 
      <Text>Press Me</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 

    handleButtonPress(){ 
    console.log("BUTTON WAS PRESSED") 
    this.myFunc() 
    } 

    myFunc(){ 
    console.log("MY FUNCTION WAS CALLED") 
    this.setState({message:"GOODBYE"}) 
    } 

} 

が、パラメータが必要な場合は、次の例では動作しません：

render(){ 
    return (
     <View> 
     <Text>{this.state.message}</Text> 
     <TouchableOpacity onPress={function(){ this.handleButtonPress("GOODBYE") }}> 
      <Text>Press Me</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 

    handleButtonPress(message){ 
    console.log("BUTTON WAS PRESSED WITH MESSAGE: " + message) 
    this.myFunc(message) 
    } 

    myFunc(message){ 
    console.log("MY FUNCTION WAS CALLED") 
    this.setState({message:message}) 
    } 

それはスロー：私が使用してきたundefined is not a function (evaluating 'this.handleButtonPress("GOODBYE")')

1つの戦略はhandleButtonPress functiを参照することですこのように、再び内部render機能、上：

render(){ 
    handlePress = this.handleButtonPress; 

    return (
     <View> 
     <Text>{this.state.message}</Text> 
     <TouchableOpacity onPress={function(){ handlePress("GOODBYE") }}> 
      <Text>Press Me</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 

だが、別の/より良い方法はありますか？

Answer 1

匿名の機能があるので、thisのコンテキストはグローバルwindowオブジェクトです。 handleButtonPressが存在しないので、undefinedが機能ではないというエラーをスローします。 thisはまだ匿名関数以外のクラスを参照していますので、その参照をhandlePressに割り当てて呼び出すことができるため、回避策が機能します。

これに対処するには、Function.prototype.bindを使用します。これは、機能にコンテキストthisを補足します。 bind()メソッドが呼び出され、新しい関数を作成します

、提供された値に設定し、そのthisキーワードを持っている...

あなたがそうのように、ここでそれを適用することができます：リンクドキュメントから

を

<TouchableOpacity onPress={function() { this.handleButtonPress("GOODBYE") }.bind(this)}> 

これは、このようにあなたがを呼び出すことができるように、クラスに、代わりにグローバルwindowオブジェクトの匿名関数のthisコンテキストを設定します。

bind()方法は、呼び出されたときに、いずれかの先行する引数の所定の配列を備え値、に設定され、このキーワードを持つ新しい機能を作成します。文書により説明したように、上記再度凝縮させることができます新しい関数が呼び出されたときに提供されます。（強調鉱山）

arg1, arg2構文等関数に結合することができるbindのオプションの引数であるfun.bind(thisArg[, arg1[, arg2[, ...]]])

。

<TouchableOpacity onPress={this.handleButtonPress.bind(this, "GOODBYE")}> 

これは完全に匿名関数を取り除きますが、あなたはあなたのhandleButtonPress方法でそれを使うようthisはまだbindに渡す必要があります。これには、同様に適用することができます。