javascript - 事件处理程序内的调用方法未定义

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})
  }

它抛出:未定义不是一个函数(评估'this.handleButtonPress(“GOODBYE”)')

我一直在使用的一个策略是在 render 函数中再次引用 handleButtonPress 函数，如下所示:

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 上下文。从链接的文档中:

The bind() method creates a new function that, when called, has its this keyword set to the provided value...

您可以像这样在这里应用它:

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

这会将匿名函数的 this 上下文设置为类，而不是全局 window 对象，从而允许您调用 this.handleButtonPress。然后可以按照文档所述再次压缩上面的内容:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. (emphasis mine)

Syntax

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

其中arg1、arg2等是可以绑定(bind)到函数的bind的可选参数。这可以像这样应用:

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

这完全摆脱了匿名函数，但是当您在 handleButtonPress 方法中使用它时，仍然必须在 bind 中传递 this。