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/