Question

我在React Native中有一个带有onPress事件的按钮。

我想让整个班级都这样

这是我的代码：

        <TouchableOpacity onPress={this.onFBLoginButtonPress}>
          <View>
            <Text>Sign In with Facebook</Text>
            <Image source={FBImg} />
          </View>
        </TouchableOpacity>

我尝试过onPress = {（）=> this.onFBLoginButtonPress}

但这会导致按钮无法实际处理。

如何在不中断按钮的情况下传递整个课程的内容？

Answer 1

onPress={() => this.onFBLoginButtonPress}缺少尾括号，因此实际上并未调用该方法。应该是onPress={() => this.onFBLoginButtonPress()}

使用箭头功能时，我不知道您是否需要括号，因为您并非没有括号

您正在传递要调用的函数。 this.onFBLoginButtonPress 是一个函数，因此您不需要括号。但是您原来的箭头功能：

() => this.onFBLoginButtonPress

等同于：

function () {
  return this.onFBLoginButtonPress;
}

返回该函数但不调用它。

为什么箭头功能起作用并传递this.onFBLoginButtonPress不起作用：

通常来说，函数中的作用域（this）设置为调用它的对象。因此请考虑：

foo.doSomethingCool();

在doSomethingCool内部，this将设置为foo，因为它是在foo上作为方法调用的。

但是，如果将方法与对象分离，则不会设置范围：

foo.doSomethingCool() // scope === foo

const cool = foo.doSomethingCool;
cool(); // scope === undefined

这实际上是您通过this.onFBLoginButtonPress作为事件处理程序时所做的事情：

<TouchableOpacity onPress={this.onFBLoginButtonPress}>

您正在传递函数本身，该函数将单独调用：

// Inside the component receiving the handler prop
// it's just an ordinary function
const {onPress} = this.props;
onPress(); // no scope

您可以通过使用function.bind显式设置范围来解决此问题：

// create a copy of onFBLoginButtonPress that's explicitly bound to 'this'
<TouchableOpacity onPress={this.onFBLoginButtonPress.bind(this)}>

使用箭头功能看不到此问题的原因是因为箭头功能use the enclosing scope：

箭头函数本身没有此函数。使用封闭词汇范围的this值；箭头函数遵循正常的变量查找规则。因此，在搜索当前范围中不存在的对象时，箭头功能最终从其所包含的范围中找到了此对象。

因此，当您这样做时：

onPress={() => this.onFBLoginButtonPress()}

处理程序函数中的

this被预先绑定到声明函数的this中。因此，即使是单独调用，您也可以获得正确的作用域：

// Inside the component receiving the handler prop
// it's just an ordinary function
const {onPress} = this.props;
onPress(); // arrow function's 'this' is already bound

希望这会有所帮助。

Answer 2

不确定这是否是最好的方法，但这似乎可行：

<TouchableOpacity self={this} onPress={this.onFBLoginButtonPress}>

Answer 3

有两种方法可以在本机反应中调用/调用methods/functions。

方法1：在构造函数中绑定函数。

export default class yourClassName extends React.Component {
  constructor(props) {
    super(props);
    this.onFBLoginButtonPress = this.onFBLoginButtonPress.bind(this); //->This will bind your function to the class and have access of this.
  }

  onFBLoginButtonPress() {
    alert('I am Called');
  }
  render() {
    return (
      <TouchableOpacity onPress={this.onFBLoginButtonPress}>
        <View>
          <Text>Sign In with Facebook</Text>
          <Image source={FBImg} />
        </View>
      </TouchableOpacity>
    )
  }
}

Way-2：使用ECMA-6中引入的粗箭头功能

export default class yourClassName extends React.Component {

  onFBLoginButtonPress = () => {
    alert('I am Called');
  }

  render() {
    return (
      <TouchableOpacity onPress={() => this.onFBLoginButtonPress()}>
        <View>
          <Text>Sign In with Facebook</Text>
          <Image source={FBImg} />
        </View>
      </TouchableOpacity>
    )
  }
}

尝试一下，这将解决问题。

如何在<TouchableOpacity>中获取类范围

3 个答案:

为什么箭头功能起作用并传递this.onFBLoginButtonPress不起作用：