3

handleButtonPressこの例の React コンポーネントのメッセージ マップ内でどのように呼び出すのでしょうか?

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

export default class MyComponent extends Component {
  constructor(props){
    super(props)
    this.state = {messages:["THANKS", "MERCI", "GRAZIE"]}
    this.myFunc = this.myFunc.bind(this)
    this.handleButtonPress = this.handleButtonPress.bind(this)
  }

  render(){
    return (
      <View>
        <Text>{this.state.message}</Text>

        {
          this.state.messages.map(function(message, index){
            return (
              <TouchableOpacity key={index} onPress={function(){ this.handleButtonPress(message) }.bind(this) }>
                <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(message)'). どうしてこんなことに？

4

1 に答える 1

7

問題は、明示的に指示されない限り、コンテキストArray.prototype.mapをバインドしないことです。thisドキュメントから：

thisArgパラメータが に提供されている場合map、呼び出されたときにコールバックに渡され、この値として使用されます。それ以外の場合、値undefinedは this 値として使用するために渡されます。1

this値を指定しないため、 isundefinedであり、したがって、thisis の無名関数にバインドされている を実行しonPressますundefined。handleButtonPressの機能がないため、エラーがスローされますundefined。thisこれは、コンテキストを にmap、およびドキュメントから渡す必要があることを意味します。

構文

arr.map(callback[, thisArg])

これは次のように適用されます。

{
    this.state.messages.map(function(message, index){
        return (
          <TouchableOpacity key={index} onPress={function(){ this.handleButtonPress(message) }.bind(this) }>
            <Text>Press Me</Text>
          </TouchableOpacity>
        )
    }, this) //Notice the `this` here, this is the optional thisArg which is used as the `this` value in the callback.
}

はthisに渡されるクラスmapです。onPressその後、のイベント ハンドラー (無名関数)にバインドされ、正しく呼び出されます。(注:メソッドをコンストラクターで一度バインドする必要があります。これを行うと、イベントがトリガーされるたびに新しいメソッドが作成されるためです。)

1実際には、thisArg渡されずに、this通常どおり値が決定されます。this通常の関数ではwindow（undefined厳密モードでは、クラスのデフォルトです）、あなたthisが思っているものではありません。

于 2016-10-17T00:38:06.237 に答える