Question

我有一些onclick处理程序的元素，它应该在渲染元素时传递它所具有的变量的值。不幸的是，它们只传递变量在点击时的值。

class Application extends React.Component {
   constructor(props){
      super(props)

     this.state = {
       clickedValue: 0,
       array: [1,2,3,4,5,6,7,8,9,10]
     }
    }

  changeHeadline(number){
    this.setState({clickedValue: number})
  }

  render() {
  let paginationCounter = 0; 
    return <div>
      <h1>{this.state.clickedValue}</h1>
       {
          this.state.array.map((element, index) => {
            if ((index + 1) % 2 === 0) {
              paginationCounter += 1;
              return (
                <button
                    onClick={() => this.changeHeadline(paginationCounter)}
                    >
                    {paginationCounter}
                </button>
              ) 
            }
          })
        }
      </div>;
   }
}

我还为它创建了一支笔：https://codepen.io/anon/pen/jGKzzz 我在此笔中的预期行为是：当单击按钮时，标题文本应更改为按钮上的数字。

我非常感谢你的帮助。提前谢谢！

Answer 1

你的onClick事件处理程序应该更改为绑定到一个新函数，如下所示：

onClick={this.changeHeadline.bind(this, paginationCounter)}

bind创建一个调用changeHeadline函数的新函数。第一个参数是应该绑定到新函数this的对象，第二个参数是要传递给changeHeadline函数的值。

Answer 2

问题是您通过引用而不是值

传递变量paginationCounter

因此，当循环完成时，paginationCounter的值设置为5，并传递给每个按钮。

Onclick在呈现

2 个答案: