javascript - 如何防止ReactJS中的双击

Question

我正在ReactJS中进行搜索过滤器工作，但遇到了问题。问题是当用户进行一些搜索并想要单击“下一步”(因为我在应用程序中有分页)时，用户将单击两次以加载其他页面的数据。

我需要避免这种行为:我的意思是，当用户单击下一步时，它应该是“加载数据”而不是“双击”。

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

代码

    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()
        );}

      }

Answer 1

您可以设置 isLoading 状态，并在处于此状态时在 button 上设置 disabled 属性，这将不允许按钮被加载在获取数据时再次单击。

 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>
    );
 }