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状态，并在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>
    );
 }

如何防止在ReactJS中双击

1 个答案: