时间戳

首页 > 解决方案 > 无法将所需的参数传递给反应渲染（）的jsx内的函数

reactjs - 无法将所需的参数传递给反应渲染（）的jsx内的函数

问题描述

基本上，我想将与 span 元素关联的值传递给函数 UpdateSelectedNumbers()。但是，如果我使用 for 循环创建一个跨度元素数组，则始终使用值 9 调用 onClick 事件处理程序（UpdateSelectedNumbers）。当我使用 map 函数时，情况并非如此。有人可以解释为什么会发生这种情况

const stars = [1,2,3,4,5,6,7,8,9];
var temp = [];
for(var i=0;i<9;i++){
    temp.push(<span className={getClass(i+1)} onClick={()=>props.UpdateSelectedNumbers(i+1)}>{i+1} </span>)
}
return (
     <div>
     {stars.map(x => <span className={getClass(x)} onClick={()=> props.UpdateSelectedNumbers(x)}>{x}</span>)}
     {temp}
     </div>
    )

标签： reactjs

解决方案

因为var它的作用域是最近的函数，所以你的所有()=>props.UpdateSelectedNumbers(i+1)函数都会得到 的最终值i，即8.

您可以改为使用letwhich 范围为最近的封闭块，因此循环的每次迭代都有自己的值。

推荐阅读