React按钮连击控制

最新推荐文章于 2022-10-08 11:52:55 发布
最新推荐文章于 2022-10-08 11:52:55 发布
阅读量447 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhh_cycle/article/details/106586455
版权
本文介绍了如何在React中防止按钮连续点击，通过设置state中的loading标志位来控制按钮的可用性。在点击事件中，只有当loading为false时才执行业务代码，并在开始执行后将loading设为true。执行结束后再将loading设回false，从而避免多次触发。同时，分析了由于渲染速度导致的遮罩控制问题。
摘要由CSDN通过智能技术生成

React按钮连击控制

原创，转载请注明出处。
作者：李宏远

实现思路

1、在state中初始化loading标志为false
2、点击事件中添加!this.state.loading判断
3、修改loading状态为true
4、业务执行，成功后、或失败后，回调中修改loading状态为false

关键说明

1、遮罩无法控制，在于点击太快，遮罩还未渲染出来
2、控制关键在于!this.state.loading判断在setState之前，第二次点击时，loading已被修改为true，而遮罩渲染可能还未渲染

state部分

// state状态
this.state = {
   
	loading: false
}

按钮事件

tj
最低0.47元/天 解锁文章
lhh_cycle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Native悬浮按钮组件的示例代码
01-21
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。 效果图 安装方法 npm i react-native-action-button --save react-...
多次点击提交按钮导致多次请求问题
莉兹Liz的博客
01-15 1548
问题 填了一组数据，多次连续快速点击提交按钮，后端接口响应较慢，约400多ms，导致多次提交成功，前端多次展示接口返回msg“修改成功”。 修改 Button中添加disabled属性，根据接口返回code码控制按钮置灰与否。 代码 简单写了主要代码 import React, { Component } from 'react' import { Button } from 'antd'; import * as http from '../http'; class Demo extends Compo
解决 react h5移动端项目 fastclick点击多次才生效的问题
CherryLee_1210的博客
11-14 1968
项目背景 react框架编写的移动端h5项目 项目中引用了fastclick.js 使用 input type=“file” 用户上传头像 faskclick实现原理 fastclick是通过在touchstart里记录触摸点信息，在touchend里判断此次触摸是否是个有效的click点击，如果是，则在touchend里阻止默认事件以防止产生原生click事件（因为会有 300ms 的延迟），并立即生成并触发自定义的click事件（没有延迟） 300ms产生的原理 时间要追溯到 2007 年初代 iPh
React项目中如何防止按钮快速重复点击
tuohaohu的博客
09-07 2287
React项目中如何防止按钮快速重复点击，使用ahooks中的节流函数
react防重复点击方法
baidu_41604826的博客
10-11 1万+
React 防重复点击方法、原理 原理：在请求数据一旦开始，直到本次请求结束之前，不能进行下一次点击，否则给与相应的提示 state中的初始设置： state={ bool:true, } 点击事件设置: btn_click = async () => { this.setState({ bool: false, }) . . . if(this.state.bo...
React 防止按钮多次点击事件 重复提交
热门推荐
Zeng__Yi的博客
03-19 1万+
为了方便，简单的记录一下： 在state中设置一个控制点击事件 this.state = { isClick: true } 在点击事件的函数里 handleOk = () => { const { isClick } = this.state if (isClick) { //如果为true 开始执行 this.setState({ isClick: false })...
react实现菜单权限控制的方法
12-29
通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图： 下面，通过react实现这样的后台管理系统(脚手架)，功能简介： 1.顶部的菜单项根据用户的角色动态生成。 2.侧边测菜单项根据已...
react高阶组件经典应用之权限控制详解
01-19
所谓高级组件，即：接受一个组件作为参数，并且其返回值也为一个react组件 而大家应该都知道，权限控制算是软件项目中的常用功能了。在网站中，权限控制一般分为两个维度：页面级别和页面元素级别。 我们来说说页面...
React按钮滑块
02-08
React按钮滑块 将所有按钮或任何组件包装在react-button-slider中，它可以水平滚动而无需任何滚动条安装npm npm i @gunawanedy/react-button-slider 纱yarn add @gunawanedy/react-button-slider例import React from...
react 点击两次_ReactJs：防止多次按下按钮
weixin_32605973的博客
01-12 1240
在我的React组件中，我有一个按钮，当单击该按钮时，它会通过AJAX发送一些数据。我只需要第一次发生，即在首次使用后禁用该按钮。我如何尝试做到这一点：var UploadArea = React.createClass({getInitialState() {return {showUploadButton: true};},disableUploadButton(callback) {this...
react-navigation 连续点击多次跳转
最恨不过不努力
12-26 819
问题描述，关于react-navigation 导航库在快速连续点击的时候，叶面会发生多次跳转，初次遇到这个坑爹的问题时，一脸懵逼，看过源码，几经折腾终于弄明白了是咋会儿事儿 问题出现的原因： node_modules/react-navigation/src/NavigationActions.js 下的部分代码 // 罪魁祸首是因没有针对该事件做相应的延迟处理，用源码可以看到，每次点击都会触发...
React在弱网环境下限制按钮多次点击,防止重复提交
yhjlq的博客
05-26 2413
React在弱网环境下限制按钮多次点击,防止重复提交 this.state = { isRepeatClick: true //设置开关来控制重复点击 } //点击确定按钮,防止重复提交 okHandle = () => { const { isRepeatClick} = this.state if (isRepeatClick) { //如果为true 开始执行 this.setState({ isRepeatClick: false }) //将isRepeatClick变成false，
按钮防连点
qq_43796489的博客
08-09 467
思路：点击按钮之后，通过disabled将按钮置成不可操作状态，事件请求结束之后，将按钮恢复成可操作状态。 1.react示例 import React, { useState } from 'react' const App = (props) => { const [disabled, setDisabled] = useState(false) // 防连点 const handleFinish = async(values) => { setDi
react----useEffect副作用(加载更多按钮、购物车全选单选 就会用到这个）
DcTbnk的博客
07-30 654
hooks useState 可以定义一个局部状态数据 useEffect 副作用,当一个数据或者属性发生改变之后会引起的一些变化
【React工作记录三十四】ant design中Popconfirm的使用
geyaoisnice的博客
02-11 1023
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 歌谣 歌谣 多余的部分怎么做一个提示呀 有什么办法解决的嘛 代码部分 <Popconfirm placement="right" title="嘻嘻嘻"> <span .
react + ant select自定义多选+Popconfirm气泡提示框 【多个】
weixin_40603062的博客
10-08 1177
【代码】react + ant select自定义多选+Popconfirm气泡提示框 【多个】
react 监听键盘事件及多按键事件
water_Popcorn的博客
08-05 3958
监听键盘事件及多键盘按键事件
React-native Alert弹出多个按钮
前人挖坑，后人种（pen）
02-21 800
最多3个，使用如下 Alert.alert('提示', '是否登录?', [{ text: '确定', onPress: () =&gt; { this.props.status == "在线" ? login_out() : this.login() ...
react学习(一) button点击
zslngu的博客
10-17 1935
安装好node后可以用 npx create-react-app my-app 初始化 引入 ant-mobile的组件 最终效果 未点击时 点击后 代码 创建一个显示button的组件 import React from 'react'; // react 中所有的组件都需要继承 React.Component class SingleRecord extends React.Component { // 构造函数 props由父组件传入 constructor(props) {
react在dom中控制按钮显示隐藏
最新发布
06-03
要在React中根据条件控制按钮的显示和隐藏，可以使用条件渲染（Conditional Rendering）。 例如，如果要在某个状态下显示按钮，可以在render函数中使用一个if语句来判断： ```javascript class MyComponent ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值