当前位置: 首页 > 知识库问答 >
问题:

反应:如何禁用“下一步”按钮

耿玄裳
2023-03-14

我正在进行分页。我们在应用程序中有两个按钮NextPrev。我在每页上显示5条记录,如果当前数组中没有数据(数组数据来自API),我想禁用Next Button。我是ReactJS的初学者,请帮助我如何禁用Next按钮。

密码

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

共有1个答案

周和志
2023-03-14

我认为实际上你需要引用所有数据的长度。否则你怎么知道你是否达到了极限?

<Button positive onClick={this.btnClick} 
  disabled={this.state.skip >= this.state.allData.length} >Next</Button>
 类似资料:
  • 问题内容: 我正在使用react native导航(react- navigation)StackNavigator。它从应用程序整个生命周期的“登录”页面开始。我不想使用返回选项,返回“登录”屏幕。有谁知道登录屏幕后如何将其隐藏在屏幕上?顺便说一句,我也使用以下命令将其隐藏在登录屏幕中: 问题答案: 1)要使后退按钮在react-navigation v2或更高版本中消失: 2)如果您要清理导航

  • 我有一个包含36个按钮的响应网站。乍一看,我们只能看到12个按钮,我需要验证它们的文本值,我知道如何做到这一点。但问题是我需要点击下一步按钮,直到它不可见。那么在c#中如何用selenium来做呢? 此外,在单击“下一步”时,我们需要将按钮的文本存储在一个列表或数组中,这样我就可以将所有列表添加到一个新列表中并进行比较。 看看下面的代码,我试过了。 现在上面的工作正常,但当“下一步”按钮不可用时,

  • 问题内容: 我想在片段类中禁用后退按钮。在此片段中似乎不起作用。如何禁用后退按钮? 这是我的示例代码: 问题答案: 您必须重写父FragmentActivity类的onBackPressed。因此,将您的代码放在父FragmentActivity中。或者,您可以使用以下方法调用父方法: 在FragmentActivity中重写onBackPressed方法,而不调用其超类来禁用后退按钮。

  • 我以编程方式生成了许多按钮(一些按钮用于增加值,而另一些按钮用于减少值),当它们调整的值达到最大值或最小值时,我会禁用这些按钮。(即,当达到最大值时,“增加”按钮被禁用,而当达到最小值时,“减少”按钮被禁用。)除了禁用,我还将按钮状态设置为“按下”,以直观地指示已达到极限值,并且按钮不再工作。 我的按钮onClickListener的'增加'按钮看起来像这样: ClickListeners上相应的

  • 问题内容: 我有这个组成部分: 我希望在输入值为空时禁用按钮。但是上面的代码不起作用。它说: add-item.component.js:78未捕获的TypeError:无法读取未定义的属性“值” 指向。我在这里怎么做错了?我猜测执行方法时可能尚未创建ref 。如果是,那么解决方法是什么? 问题答案: 使用不是最佳实践,因为它直接读取DOM,最好使用React的。另外,您的按钮不会更改,因为该组件

  • 问题内容: 我有angularJS 1.5.0-rc.2 我在互联网上发现可以使用该指令 但这不会禁用按钮。 我试过的 在我的控制器中,loaded定义为$ scope.loaded = false。 如何禁用按钮?谢谢 问题答案: 仅当表达式为 true时, 该按钮才会被禁用。