Как предотвратить двойной щелчок в 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 и установить опору 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>
    );
 }