如何防止在 ReactJS 中双击

Question

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

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

我是 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状态并在此状态下设置disabled道具，button这将不允许在获取数据时再次单击按钮。

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