反应本机内联箭头函数，带参数。令人困惑的定义

Question

我有一系列 react native TouchableHighlights，每个都有一个 key prop（它们是从迭代器生成的）。我想给每一个知道其关键参数的 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)} />