ReactJs。ボタンが何度も押されないようにする

質問

私のReactコンポーネントでは、クリックされたときにAJAXを介していくつかのデータを送信するためのボタンがあります。私は最初の1回だけ起こる必要があります、すなわち、その最初の使用の後にボタンを無効にすることです。

どのように私はこれをしようとしています。

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のドキュメントによると、これは期待されていることです。

どのようにしたら、ボタンがクリックされた瞬間に無効になったり、完全に消えたりするように強制することができますか？

どのように解決するのですか?

ボタンがクリックされたら無効になるようにし、ページ内に残す（クリックできない要素にする）ことができます。

これを達成するためには、ボタン要素にrefを追加する必要があります。

<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でrefを処理する好ましい方法は、文字列ではなく、関数である。

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


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

更新しました。 react hooksの使用

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/