Reactjs 防止多次按下按钮

var UploadArea = React.createClass({

  getInitialState() {
    return {
      showUploadButton: true
    };
  },

  disableUploadButton(callback) {
    this.setState({ showUploadButton: false }, callback);
  },

  // This was simpler before I started trying everything I could think of
  onClickUploadFile() {
    if (!this.state.showUploadButton) {
      return;
    }
    this.disableUploadButton(function() {
      $.ajax({
        [...]
      });

    });
  },

  render() {
    var uploadButton;
    if (this.state.showUploadButton) {
      uploadButton = (
        <button onClick={this.onClickUploadFile}>Send</button>
      );
    }

    return (
      <div>
        {uploadButton}
      </div>
    );
  }

});

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

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

.btn:disabled{ /* styles go here */}

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

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


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

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>

Reactjs相关问答推荐

Redux toolet TypHelp：在使用redux thunk获取数据时无法读取未定义(读取类型)的属性

如何等待我的插入内容提交后再继续执行指令？

CreateBrowserRouter将props 传递给父组件以验证权限

在Reaction常量函数中未更新状态变量

Redux工具包-useSelector如何通过Reducer引用InitialState？

使用Next.js和Next-intl重写区域设置

在react上隐藏源映射

如何在中间件中获取 nextAuth 会话

在reduce()方法上得到NaN

useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么？

CORS策略：对预检请求的响应未通过访问控制判断：没有Access-Control-Allow-Origin

使用状态与复选框不同步

条件渲染元素的测试不起作用

在 React 中使用复选框管理状态

docker：来 automorphic 护进程的错误响应：未指定命令.的原因是什么？

未捕获的类型错误：useSelector 不是函数

下一次导出：未捕获的语法错误：标识符注册表已被声明

如何使图标适合 react-bootstrap 中的行元素

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

我可以在类组件中使用 useState 挂钩吗？