ReactJs:防止多次按下按钮

ReactJs:防止多次按下按钮,第1张

ReactJs:防止多次按下按钮

您可以做的是单击该按钮后将其禁用,然后将其保留在页面中(不可单击的元素)。

为此,您必须向按钮元素添加一个引用

<button ref="btn" onClick={this.onClickUploadFile}>Send</button>

然后在onClickUploadFile函数上禁用该按钮

this.refs.btn.setAttribute("disabled", "disabled");

然后,您可以相应地设置禁用按钮的样式,以向用户提供一些反馈

.btn:disabled{ }

如果需要,请确保使用

this.refs.btn.removeAttribute("disabled");

更新: 在React中处理引用的首选方法是使用函数而不是字符串。

<button   ref={btn => { this.btn = btn; }}   onClick={this.onClickUploadFile}>Send</button>this.btn.setAttribute("disabled", "disabled");this.btn.removeAttribute("disabled");

更新: 使用react挂钩

import {useRef} from 'react';let btnRef = useRef();const onBtnClick = e => {  if(btnRef.current){    btnRef.current.setAttribute("disabled", "disabled");  }}<button ref={btnRef} onClick={onBtnClick}>Send</button>

这是一个使用您提供的代码的小示例
https://jsfiddle.net/69z2wepo/30824/



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5622564.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-15
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表(0条)

保存