在循环中响应 onClick 事件答案

【问题标题】：React onClick Events in loops在循环中响应 onClick 事件
【发布时间】：2019-08-04 17:23:26
【问题描述】：

我试图将一些变量绑定到 React 组件内的 onClick 事件。我在 for 循环中执行此操作，因为我需要其中很多。

我的代码如下所示：

generateCells(pieData){
        var cells = []

        for(var j = 0; j < pieData.length; j++){
            var imageIndex = pieData[j].image;
            var image = [pieData[j].innerIndex, pieData[j].angle];
            console.log(image);
            var rowLength = pieData.length;
            cells.push(<Cell key={imageIndex} onClick={() => this.retake(image, rowLength)} fill={this.state.progressState[imageIndex] ? '#00C49F' : '#FF8042'}/>)
        }

        return cells;
    }

但我在onClick 事件中的image 变量始终来自循环的最后一次迭代。这怎么可能？

感谢您的建议！

【问题讨论】：

标签： javascript reactjs loops onclick

【解决方案1】：

这是因为您正在使用 var 并且它正在创建一个范围为您的 generateCells() 函数的变量。尝试使用let 来查看差异（变量范围将是for 循环）

我前段时间做了一个 Codepen 来查看它们之间的区别，这可能会对你有所帮助：https://codepen.io/ArthyFiciel/pen/rxKeQR

【讨论】：

for(let j = 0; j < pieData.length; j++){ 没有帮助，但将内部变量从 var 更改为 let 解决了我的问题。我在var 留下了j。怎么样？
这是因为在我的示例中，我将 i（for 中的 var）引用到我的回调中，所以这是需要在 for（而不是“全局”进入函数）。在您的情况下，您的回调引用到 image 和 rowLength 所以它们都必须限定在 for 中而不是 generateCells

【解决方案2】：

更改 var 以允许 for 循环。 let 创建新的绑定并为每个循环创建一个变量声明，这是一个块级声明。而 var 作用域为全局作用域，因此当您单击 var 值时，它已附加到全局作用域并显示最后一个值：

for(let j = 0; j < pieData.length; j++){
            var imageIndex = pieData[j].image;
            var image = [pieData[j].innerIndex, pieData[j].angle];
            console.log(image);
            var rowLength = pieData.length;
            cells.push(<Cell key={imageIndex} onClick={() => this.retake(image, rowLength)} fill={this.state.progressState[imageIndex] ? '#00C49F' : '#FF8042'}/>)
        }

        return cells;

演示：https://stackblitz.com/edit/react-geu71r

【讨论】：

【解决方案3】：

在for 循环中将var 更改为let，这应该会有所帮助

【讨论】：