Javascript 如何循环并显示具有onClick的按钮，并将不同的变量传递给另一个函数？

我有下面的ReactJS代码，我正在使用它来呈现一些按钮，这些按钮将允许用户浏览从API返回的数据（一组分页图像）

我显示了多个按钮，但它们将

I

作为19（循环中的结束值）发送到

handlepage click（）

函数

如何获取要传递给我的

HandlePage Click（）

函数的

I

的值

handlePageClick( button ) {

    console.log( button );

    this.setState( prevState => {
        return {
            currentPage: button
        }
    }, () => {
        this.loadMedia();
    });

}

render() {

    // figure out number of pages

    const mediaButtonsNeeded = parseInt( this.state.totalMedia / this.state.perPage )

    var mediaButtons = [];
    for (var i = 0; i < mediaButtonsNeeded; i++) {
        mediaButtons.push(<button  onClick={() => this.handlePageClick(i)}>{i}</button>);
    }


    return (

        <div>

            <div>
                <h1>Media test</h1>
                {media}
                {mediaButtons}
            </div>

        </div>

    )

HandlePage点击（按钮）{
控制台日志（按钮）；
this.setState（prevState=>{
返回{
当前页面：按钮
}
}, () => {
这是loadMedia（）；
});
}
render（）{
//算出页数
const mediabuttonseeded=parseInt（this.state.totalMedia/this.state.perPage）
var mediaButtons=[]；
对于（变量i=0；i{i}）；
}
返回(
媒体测试
{media}
{mediaButtons}
)

因为

var

是全局范围变量声明，所以循环总是将

i

重写为下一个值

最简单的解决方案就是将

var

替换为

let

 for (let i = 0; i < mediaButtonsNeeded; i++) {// your code...

for（让i=0；i

因为

var

是全局范围变量声明，所以循环总是将

i

重写为下一个值

最简单的解决方案就是将

var

替换为

let

 for (let i = 0; i < mediaButtonsNeeded; i++) {// your code...

for（让i=0；i

这应该可以：

for (var i = 0; i < mediaButtonsNeeded; i++) {
        mediaButtons.push(<button  onClick={() => this.handlePageClick(i+"")}>{i}</button>);
}

for（变量i=0；i{i}）；
}

这应该可以：

for (var i = 0; i < mediaButtonsNeeded; i++) {
        mediaButtons.push(<button  onClick={() => this.handlePageClick(i+"")}>{i}</button>);
}

for（变量i=0；i{i}）；
}