时间戳

首页 > 解决方案 > 无法弄清楚为什么 onClick 没有更新状态

reactjs - 无法弄清楚为什么 onClick 没有更新状态

问题描述

我知道围绕这个问题有类似的问题，但我无法使用这些答案来让我的代码正常工作。

每次单击按钮时，我都想将 nextPage 的状态增加 1。

我尝试删除 handleClick 方法中的返回。我还尝试添加一个变量来保存更新的 num 并将其作为 state 的值传递，就像这样

handleClick = (num) => {
let x = num++
        return this.setState({
            nextPage: x
        })
    }

我没有尝试似乎更新状态..这是我当前的代码如下：

import React, { Component } from 'react'


class Pages extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nextPage: 1
        }

    }
    handleClick = (num) => {
        return this.setState({
            nextPage: num++
        })
    }

    render() {
        return (
            <div className='pageNav'>


                <button className="nextButton" onClick={() => this.handleClick}>Next </button>

            </div>
        )
    }

}

export default Pages

标签： reactjsonclicksetstate

解决方案

handleClick当您按下按钮时，您没有调用。

onClick={() => this.handleClick}

相当于

onClick={() => {
  return this.handleClick
}}

这与

onClick={() => {
  return this.handleClick(/* do you need to pass a number here? */)
}}

或者

onClick={this.handleClick}

推荐阅读