使用参数反应本机内联箭头功能。令人困惑的定义

Question

我有一系列反应本机的TouchableHighlights，每个都有一个关键道具（它们是从迭代器生成的）。我想给每个onPress函数知道其关键参数。

我已经阅读了基于类的箭头函数通常是最佳实践，所以我尝试了以下方法：

handlePress = (event) => {
    console.log(event.target.key)
}

<TouchableOpacity key={key} onPress={this.handlePress} />

没有骰子，事件为空。

所以我尝试了：

handlePress = (key) => {
    console.log(key)
}

<TouchableOpacity key={key} onPress={() => this.handlePress(key)} />

这有效

但是，这也可以：

handlePress(key) {
    console.log(key)
}

<TouchableOpacity key={key} onPress={() => this.handlePress(key)} />

我认为任何一个都会失败。这些功能在功能上是相同的，还是我缺少一些细微之处？

Answer 1

javascript中的普通功能和箭头功能基本上有两个区别。

1. 绑定
2. 语法

绑定

---

如果尝试在常规函数中使用this，它将引发一些错误。 例如：

class example {

    constructor() {
        super();
    }

    someFunc() {
        console.log(this.props);
    }

    someFunc();

}

这将失败。

要修复它，您应该像这样在类的构造函数中手动将其绑定：

class example {

    constructor() {
        super();
        this.someFunc = this.someFunc.bind(this);
    }

    someFunc() {
        console.log(this.props);
    }

    someFunc();

}

另一方面，您不需要绑定箭头功能。默认情况下它将获取上下文。因此，此代码完全有效：

class example {

    constructor() {
        super();
    }

    const someFunc = () => {
        console.log(this.props);
    }

    someFunc();

}

与您的问题有关：

---

如果您还希望在任何功能（常规或箭头）中使用event，则可以执行以下操作：

使用箭头功能：

handlePress = (event, key) => {
    console.log(event, key)
}

<TouchableOpacity key={key} onPress={event => this.handlePress(event, key)} />

使用正常功能：

handlePress(event, key) {
    console.log(event, key)
}

<TouchableOpacity key={key} onPress={event => this.handlePress(event, key)} />