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

Question

我有以下 ReactJS 代码，我用它来渲染许多按钮，这些按钮将允许用户导航从 API 返回的数据(一堆分页图像)。

我显示了多个按钮，但它们将 i 作为 19(循环中的最终值)发送到 handlePageClick() 函数。

如何将 i 的值传递给我的 handlePageClick() 函数？

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>

    )

Answer 1

由于 var 是全局范围变量声明，因此循环始终将 i 重写为下一个值。

最简单的解决方案是将 var 替换为 let。

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