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...

Answer 2

这应该有效：

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

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

2 个答案: