如何防止在ReactJS中双击 [英] How to prevent a double click in ReactJS

问题描述

我正在使用 ReactJS 中的搜索过滤器，但遇到了问题。问题是用户何时进行一些搜索并想要单击 next （因为我在应用程序中有分页），然后用户将单击两次以加载其他页面的数据。

I am working on search filter in ReactJS and I face a problem. Problem is about when User does some search and wants to click on next (because I have pagination in app) then the User will click twice to load other pages of data.

我需要避免这种行为：我的意思是当用户单击 next 时，它应该是加载数据而不是双击。

I need to avoid this behaviour: I mean when user does single click on next it should be "load a data" instead of "double click".

我是ReactJS的新手，请专家帮助我

I am new to ReactJS, please expert help me

代码

    btnClick() {
        const { Item,skip , filtered, data } = this.state
        if(filtered.length>0 || !data.length ){
          window.alert("Hello,")
          this.setState({
            filtered:[],
            skip:0
          },()=>this.getData());
          return false
        }else {
          window.alert("Hello , Dear")
        this.setState(
          {
            Item,
            skip: skip + pageSize
          },
          () => this.getData()
        );}

      }

推荐答案

您可以具有 isLoading 状态，在此状态下，在按钮上设置 disabled 道具，当该状态不允许在数据中再次单击该按钮时

You can have a isLoading state and set the disabled prop on the button when in this state which will not allow the button to be clicked again while the data is being fetched.

 btnClick() {
   const {
     Item,
     skip,
     filtered,
     data
   } = this.state;
   
   if (filtered.length > 0 || !data.length) {
     window.alert("Hello,")
     this.setState({
       filtered: [],
       skip: 0
     }, () => this.fetchData());
     return false
     
   } else {
     window.alert("Hello , Dear")
     this.setState({
         Item,
         skip: skip + pageSize
       },
       () => this.fetchData()
     );
   }
 }
 
 fetchData() = async() => {
     this.setState({ isLoading: true });
     
     await this.getData();
     
     this.setState({ isLoading: false });
 }
 
 render() {
        const {
      isLoading
    } = this.state;
    
    const buttonProps = isLoading ? { disabled: true} ? {};
    
    return (
      <button onClick={this.btnClick} { ...buttonProps }>
            Click to fetch
      </button>
    );
 }

这篇关于如何防止在ReactJS中双击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！