Question

我遍历一个数组，每次单击索引处的文本时，都将其打印出来，但是我每次都使用bind。如何在不使用bind而仅使用es6的情况下做到这一点。

for(let index=1;index<=10;index++){
            arr.push(
                <TouchableOpacity
                    activeOpacity={0.7}
                    key={index}
                    onPress={this.Updatefunction.bind(this, index)}
                >
                    <Text>
                        {index}
                    </Text>

                </TouchableOpacity>
            );
        }

我想访问索引，但不想进行绑定。

Answer 1

您可以使用其他语法

就像使用箭头功能一样，

for(let index = 1; index <= 10; index++){
            arr.push(
                <TouchableOpacity
                    activeOpacity={0.7}
                    key={index}
                    onPress={() => this.Updatefunction(this, index)}
                >
                    <Text>
                        {index}
                    </Text>

                </TouchableOpacity>
            );
        }

每次调用渲染时，都会创建一个匿名函数，该函数在调用时会调用this.onClick。

但是考虑以下情况您的功能看起来像

Updatefunction = (this, index) => {
    // your code here
}

在上述情况下，arrow函数不会每次都重新创建函数，而是将上下文绑定到React组件，因为arrow函数没有自己的函数；使用封闭执行上下文的this值。实例化类时一次。这类似于构造器绑定的工作方式。这是建议的箭头功能类字段的一部分，它不是ES6功能，

Answer 2

您可以轻松地使用ES6方法来定义箭头功能，然后像这样调用它

for(let index=1;index<=10;index++){
            arr.push(
                <TouchableOpacity
                    activeOpacity={0.7}
                    key={index}
                    onPress={() => this.Updatefunction(this, index)}
                >
                    <Text>
                        {index}
                    </Text>

                </TouchableOpacity>
            );
        }

并像

那样定义您的函数

Updatefunction = (this, index) => {
// your code here
}

在不使用绑定的情况下访问索引

2 个答案: