0

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に、関数内で関数を再度参照することです。render

render(){
    handlePress = this.handleButtonPress;

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

しかし、別の/より良い方法はありますか?

4

1 に答える 1

2

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

これに対抗するために、関数のコンテキストをFunction.prototype.bind補足する which を使用できます。thisリンクされたドキュメントから：

このメソッドは、呼び出されたときにキーワードを指定された値に設定bind()する新しい関数を作成します...this

次のようにここに適用できます。

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

これthisにより、無名関数のコンテキストがグローバル オブジェクトではなくクラスに設定されるwindowため、 を呼び出すことができますthis.handleButtonPress。ドキュメントで言及されているように、上記は再び要約できます。

このbind()メソッドは、呼び出されたときに this キーワードが指定された値に設定され、新しい関数が呼び出されたときに指定された引数の前に指定された一連の引数を持つ新しい関数を作成します。(私のものを強調)

構文

fun.bind(thisArg[, arg1[, arg2[, ...]]])

どこarg1, arg2etc はbind、関数にバインドできるオプションの引数です。これは次のように適用できます。

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

これにより、無名関数が完全に取り除かれますが、メソッドで使用する場合はthis引き続き渡す必要があります。bindhandleButtonPress

于 2016-10-17T00:15:03.657 に答える