防止按钮重复点击解决思路

一、问题出现场景:

表单提交重复点击提交按钮,点赞、收藏等操作

二、解决思路:

设置一个变量用于判断是否可以点击,默认为true,当这个值为true时可以点击,点击之后设置为false,请求接口完成之后又将值设为true。不管是框架,还是原生这个思路都OK的~

三、代码例子:

	import React from 'react';
	class Demo extends React.Component{
		 constructor(props){
	       	super(props);
	        	this.state = {
	          	isClickable: true,
	        }
	     }
	     //点击事件
	     handleClick=()=>{
	     	if(this.state.isClickable == false){
	     		return false;//代码停止往下执行
	     	}
	     	
	     	this.setState({
	          isClickable: false,
	       })
	       //请求接口
			$.ajax({
				url:'/post.php' 
				data:{a:1,b,1}
				success:function(){
					this.setState({
						isClickable: true
					}) //在提交成功之后将标志标记为可提交状态
			}
	    }
	}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值