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")')

我一直在使用的一种策略是在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.bindwhich 将补充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仍然必须在bind您在handleButtonPress方法中使用它时传入。

于 2016-10-17T00:15:03.657 回答