ReactJs：防止多次按下按钮

Question

在我的React组件中，我有一个按钮，当单击该按钮时，它会通过AJAX发送一些数据。我只需要第一次发生，即在首次使用后禁用该按钮。

我如何尝试做到这一点：

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>
    );
  }

});

我认为发生的事情是状态变量showUploadButton没有立即更新，这是React文档所说的预期。

我如何强制按钮被禁用或在单击按钮时立即消失？

Answer 1

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

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

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

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

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

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

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

如果需要，请确保使用

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/