React项目中如何防止按钮快速重复点击

最新推荐文章于 2024-09-09 22:26:33 发布

thhjfno1

最新推荐文章于 2024-09-09 22:26:33 发布

阅读量2.4k

点赞数 1

分类专栏： ahooks 节流文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/tuohaohu/article/details/126742231

版权

ahooks 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

节流

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了在项目中如何利用ahooks库的useThrottleFn hook来解决频繁点击的问题。作者通过示例展示了如何设置节流时间，以及在按钮点击事件中应用节流函数，从而避免在2秒内连续触发onOkOperations回调。

摘要由CSDN通过智能技术生成

网上搜的都是使用state 的true 和false去处理，但是自己用的时候还是会有问题，最终直接用了节流处理。

项目中使用ahooks的话，直接用useThrottleFn

  const { run: handleMenuClick } = useThrottleFn(
    () => {
      props.onOkOperations?.(0);
    },
    { wait: 2000 },
  );

然后在onClick 事件直接用 handleMenuClick

<NormalButton
  className="mr-4 border-primary text-primary"
  onClick={handleMenuClick}
  okText={item.value}
  key={item.key}
/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

thhjfno1

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react 点击两次_React Native 防止重复点击，触发多次事件

weixin_34221330的博客

01-12

1734

RN的好处在这里就不多做介绍，下面直接看一个bug一般情况，RN的点击事件如果不做特殊处理话，点击快一点都会出现触发两次或者多次的情况，下面提供一种解决方案，1、自定义一个js文件 HandlerOnceTap.jslet isCalled = false, timer;/*** @param functionTobeCalled method 对调函数体* @param interval 定时...

React-native 防止多次点击 Prevent double click

qq_42208442的博客

08-17

1542

在react-native, 想通过state来设置button是否disable，以此来达到防止多次快速点击引起的多次触发function调用，我在试验了多次之后发现，只要是state来控制，都是不能做到真正的防止多次点击。通过State来设置button disable的状态，这个render本身就需要时间，如果你的function中有多次设置state，因为react的机制，会等到后面统一render。所以其实在button 被disable之前，还是可以做到多次点击。这个在d

1 条评论您还未登录，请先登录后发表或查看评论

react防重复点击方法

baidu_41604826的博客

10-11

1万+

React 防重复点击方法、原理原理：在请求数据一旦开始，直到本次请求结束之前，不能进行下一次点击，否则给与相应的提示 state中的初始设置： state={ bool:true, } 点击事件设置: btn_click = async () => { this.setState({ bool: false, }) . . . if(this.state.bo...

React Native防止重复点击

热门推荐

Zeng__Yi的博客

03-19

1万+

为了方便，简单的记录一下：在state中设置一个控制点击事件 this.state = { isClick: true } 在点击事件的函数里 handleOk = () => { const { isClick } = this.state if (isClick) { //如果为true 开始执行 this.setState({ isClick: false })...

React零基础自学手册.pdf

03-31

- **虚拟DOM**：React使用的一种内存中的DOM表示方式，减少直接对DOM的操作，提高性能。 - **Diff算法**：比较新旧虚拟DOM树，找出最小变化进行更新，减少重绘和回流。 ##### Lesson 4 - 前端组件化（三）：抽象出...

快速构建Web应用，从零学习React后台项目模版

maozhishu的博客

04-01

512

想要快速构建实际应用，离不开一个好的应用模版，React作为大厂出品工具，有着稳定性和可维护性的保障，同时可以使用相关的全套全家桶（React + React-router + Axios + Mobx + Antd）进行连贯敏捷开发，本文将从如何在云开发平台创建项目应用模版，基于应用模版创建《后台管理》项目，以及上传并且通过云平台将项目上线部署应用，为项目开发提供更加便捷的操作环境。一、通过云开发平台快速创建初始化应用 1.创建相关应用模版请参考链接：https://developer.aliyun.

VUE防止按钮重复点击

qq_36229632的博客

08-10

1719

1.新建plugins.js import Vue from 'vue' // 在vue上挂载一个指量 preventReClick const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { console.log(el.disabled) el.addEventListener('click', () => {

第三篇精益求精，一劳永逸【组件化】【React项目部署】【Custom Element】

qq_44948011的博客

10-25

462

该篇通过对custom element对比，来简单理解 React 框架的使用，从而对组件化思想有一定了解。

React Native防止快速重复点击

vuvivian的博客

09-03

1197

建立CallOnceInInterval.js let isCalled = false, timer; /** * @param functionTobeCalled 被包装的方法 * @param interval 时间间隔，可省略，默认600毫秒 */export default callOnceInInterval = (functionTobeCa...

React hook 用于将双击功能组合到单击事件中，以及可重复的双击

06-08

useDoubleClick React hook 用于连续双击和组合单击和双击事件有关详细信息，请参阅使用 useDoubleClick 钩子文章的可重复双击和混合单击解决方案。安装 npm i @zattoo/use-double-click --save --save-exact 用法 export const Example = () => { const [doubleClickCount, setDoubleClickCount] = useState(0); const [clickCount, setClickCount] = useState(0); const hybridClick = useDoubleClick( () => setDoubleClickCount(doubleClickCount + 1), () => setClickCount(clickCount + 1), ); 返回（您点击了 {clickCount} 次您双击了 {doubleClickCount} 次点击我 ); 参数 doubleClick: (event? Reac

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

个人学习笔记

01-13

1597

一、问题出现场景：表单提交重复点击提交按钮，点赞、收藏等操作二、解决思路: 设置一个变量用于判断是否可以点击，默认未true，当这个值为true时可以点击，点击之后设置为false，请求接口完成之后又将值设为true。不管是什么框架，还是原生这个思路都OK的~ 三、代码例子： import React from 'react'; class Demo extends React.Component{ constructor(props){ super(props);

react antd 防止一份数据多次提交

马金波

08-07

3180

如何防止一份数据多次提交呢？方案利用antd 的button loading 方式实现，在点击提交按钮后，先让按钮 loading，等待接口返回结果了，再做相应的处理，最终把loading 去除。（当然 disabed 也可实现同样的效果，个人建议是使用loading，交互会好一些） import { Form, Input, Button, Select } from 'antd'; const { Option } = Select; const layout = { labelCol: {

react 的 ref 按钮异步点击调用方法

qq_36257356的博客

03-25

1635

1. const player = useRef(); 2.<div ref={player}> 要添加的内容 </div> 3. <Button onClick={()=>bigView(player)} /> 4.const bigView = a => { a.current.toggleFullscreen(); }; 说明：1.react要引入useRef(); 4.a是参数，可以随便命名。.current是固定的。 ...

Android防止按钮快速重复点击

chuyouyinghe的专栏

02-09

420

在用户使用 Android 应用的时候，经常会出现过快且多次点击同一按钮的情况，一方面这是因为应用或手机当前有些卡顿，另一方面也可能是由于很多应用并没有设置按钮点击时的 selector 或者其它按钮响应方式(例如点击按钮时按钮放大，常见于游戏)，导致用户误认为没有点击到当前按钮，当然，除了相对应的对应用进行优化和设置点击selector以外，我们还可以做一些其它的工作，例如，判断按钮的 onClick 事件在规定事件段内只响应一次（在论坛的搜索功能中，我们常见到每10秒才可以进行一次搜索的设置，这就在一定

数据可视化：在 React 项目中使用 Vega 图表 (一)

Beijiyang

10-24

1898