React でのクリックの繰り返しを避ける方法

王林
リリース: 2021-03-09 10:10:40
転載
3094 人が閲覧しました

React でのクリックの繰り返しを避ける方法

繰り返しクリックを防ぐためのアイデア:

データのリクエストが開始されると、終了するまで次のリクエストを行うことはできません。クリックしないと、対応するプロンプトが表示されます。

具体的な方法:

状態の初期設定:

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,
		})
	}
}
ログイン後にコピー

分析:

ブール値が true の場合、リクエストを実行します。複数のクリックが発生した場合、メソッドの先頭に設定された bool:false が有効になり、リクエストが完了する前に処理されるのを防ぎます。 request;

次に、リクエストが完了したら、このリクエストが完了した後に次のリクエストを実行できるように Bool のステータスを変更します。

メソッドの先頭が false に設定されていてもリクエストが実行されるという事実については、非同期メカニズムによるものです。同じメソッド内で状態を設定して再度呼び出すと、状態は時間内に更新されませんが、次回メソッドが呼び出されたときに更新されます。

関連する推奨事項: 反応ビデオ チュートリアル

以上がReact でのクリックの繰り返しを避ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート