首頁 > web前端 > js教程 > react怎麼避免重複點擊

react怎麼避免重複點擊

王林
發布: 2021-03-09 10:10:40
轉載
3117 人瀏覽過

react怎麼避免重複點擊

防止重複點擊的想法:

#在請求資料一旦開始,直到本次請求結束前,不能進行下一次點擊,否則給與相應的提示。

具體方法:

state中的初始設定:

state={
   bool:true,
}
登入後複製

點擊事件設定:

btn_click = async () => {
	this.setState({
	   bool: false,
	})
	.
	.
	.
	if(this.state.bool){
		const value = await fetch.bbb({})
		if (value.code == 1) {
		
		} else {
		
		}
		this.setState({
		bool: true,
		})
	}
}
登入後複製

解析:

滿足bool為true的情況,我們執行請求,如果發生多次點擊的情況,方法開頭設定的bool:false就會生效,防止在請求還沒有完成的情況下進行下一次請求;

然後在請求完成之後,我們把Bool的狀態變更多來,以便此次請求完成還可以進行下一次請求。

至於方法開頭設定為false,請求也執行,是源自於一個非同步機制,在同一個方法中設定state又重新調用,state是來不及更新的,但是會在下次呼叫方法的時候執行。

相關推薦:react影片教學

以上是react怎麼避免重複點擊的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板